css 스타일을 적용하면 이미지가 다음줄로 넘어갑니다.


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 입니다.

  • 2017년 10월 30일에 작성됨

조회수 128


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;}

  • 2017년 11월 08일에 작성됨
    Css / visual design

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close