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

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

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.