css 스타일을 적용하면 이미지가 다음줄로 넘어갑니다.
조회수 1309회
http://livedf.dothome.co.kr/sub1.html
이 홈페이지구요..
jsfiddle.net/zjzn83xv
이건 스니펫입니다.
서브메뉴에 4번째 이미지를 호버 하면 다음줄 이미지들이 그 다음줄로 넘어가 버립니다.
.page_title {text-align: center; font-size:1.4em; line-height: 90px; background:#eee; border-top:1px solid #ddd; border:1px solid #eee; }
.page_wrap {width: 80%; margin: 0 auto; padding-top: 20px; height: auto;}
.span3 {width: 22%; float: left; position: relative; margin-right: 2%; }
.span3:nth-child(4), .span3:nth-child(8) {margin-right: 0; }
.span3 a {display: block; text-align: center; box-sizing:border-box; border:30px solid #000; border-color:transparent;}
.span3 a:hover {box-sizing: border-box; border:1px solid #000; }
.span3 a img {display: block; width: 70%; height:70%; margin: 0 auto;}
.pro_title { font-size:1.1em ; color:#000; line-height: 1.5;}
.pro_std {font-size:1em; color:#888; line-height: 1.2;padding: 10px;}
.pro_price {font-size:1.1em; color:#ff0000; line-height: 1.1; padding-top: 10px;}
이건 제가 사용한 css 입니다.
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
li
를 이용해서 카드ui를 만들때, width와 height의 높이를 모두 같게 조절해줘야해요. 또 hover시border
값을 변경하도록 하셨는데,border
는 요소의 넓이나 높이에 영향을 줘서 layout이 깨지거나 할 수 있어서 hover시border
값을 변경하는건 추천하고 싶지않아요. 차라리,background-color
/box-shadow
/transform
등을 이용하는것도 좋을 것같아요.조금 조정할 것을 참고해보세요.
http://jsfiddle.net/zjzn83xv/2/
.page_title {text-align: center; font-size:1.4em; line-height: 90px; background:#eee; border-top:1px solid #ddd; border:1px solid #eee; } .page_wrap {width: 80%; margin: 0 auto; padding-top: 20px; height: auto;} /* ▼▼▼▼▼ 여기서부터 스타일 수정 시작 ▼▼▼▼▼ */ .span3 { display: inline-block; width: 200px; /* 높이와 넓이가 같아야해요. 수치는 %로 하지말고, 절대값이 좋을것같아요. */ height: 400px; transition: 0.5s; /* 변화가 부드럽게 진행됩니다. */ vertical-align: top; /* li 요소들이 윗선에 맞게 해줍니다. */ } .span3:hover { position: relative; z-index: 2; box-shadow: 0 0 0 10px white; transform:scale(1.1); /* hover하면 요소가 약간 확대됩니다. */ -webkit-transform:scale(1.1);/* 크롬 */ -moz-transform:scale(1.1);/* FireFox */ -o-transform:scale(1.1);/* Opera */ background-color: white; } .span3 a { text-align: center; } .span3 a img { display: block; width: 100%; /* 이미는 영역에 꽉차게 해놓고요. */ height: auto; /*높이는 가로에 맞게 자동으로 맞춰지도록. */ } /* ▲▲▲▲▲ 여기서까지 ▲▲▲▲▲ */ .pro_title { font-size:1.1em ; color:#000; line-height: 1.5;} .pro_std {font-size:1em; color:#888; line-height: 1.2;padding: 10px;} .pro_price {font-size:1.1em; color:#ff0000; line-height: 1.1; padding-top: 10px;}
댓글 입력