반응형 테마
본문
안녕하세요.
https://sir.kr/qa/437257?sfl=mb_id%2C1&lstx=naver_8ay5sbjh
내용 으로 답변주셔서 처리하였는데. PC 로 확인하였을때 잘되는듯 보였으나.
모바일 로 확인해보니..갤러리 가.
ㅁㅁ
ㅁㅁ
ㅁㅁ
이렇게 가 아니고
ㅁㅁ
ㅁ
ㅁ
ㅁㅁ
ㅁ
ㅁ
막 이런식으로 틀어지는데.. ㅠㅠ 어떻게해야할까요..?
pc 에서 화면 줄였을때는 잘되는데.. 생각지도못했네요 ㅠㅠ
/* 갤러리 목록 */
#bo_gall h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#bo_gall #gall_ul {margin:10px -10px 0;padding:0;list-style:none;zoom:1}
#bo_gall #gall_ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_gall .gall_box {position:relative;margin:0 0 30px 0;border:1px solid #ccc;background:#fff;border-radius:0 0 2px 2px}
#bo_gall .gall_li .gall_chk{position:absolute;top:0;left:0;padding:5px;}
.gall_row .col-gn-0,.gall_row .col-gn-1,.gall_row .col-gn-2,.gall_row .col-gn-3,.gall_row .col-gn-4,.gall_row .col-gn-5,.gall_row .col-gn-6,.gall_row .col-gn-7,.gall_row .col-gn-8,.gall_row .col-gn-9,.gall_row .col-gn-10{position:relative;min-height:1px;padding-left:10px;*padding-left:0;padding-right:10px;*padding-right:0;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin-left:0;}
.gall_row .col-gn-0,.latest_row .col-gn-1{width:100%}
.gall_row .col-gn-2{width:50%}
.gall_row .col-gn-3{width:33.33333333%}
.gall_row .col-gn-4{width:25%}
@media (max-width: 970px){
.gall_row .col-gn-4{width:50%}
}
.gall_row .col-gn-5{width:20%}
.gall_row .col-gn-6{width:16.66666667%}
.gall_row .col-gn-7{width:14.28571428%}
.gall_row .col-gn-8{width:12.5%}
.gall_row .col-gn-9{width:11.11111111%}
.gall_row .col-gn-10{width:10%}
.gall_row .box_clear{clear:both}
지금 저렇게 적용되어있습니다 ㅠㅠ
답변 2
이렇게 하단에 넣고 테스트 해보세요
@media screen and (max-width:970px){
.gall_row .box_clear{clear:none;}
#gall_ul li:nth-child(2n+1) {clear:both !important;}
}
감사합니다. 깔끔하게 해결되었습니다
보통 높이가 달라서 틀어집니다. 크롬 개발자도구를 이용해서 틀어지는 부분의 ㅁ 높이를 확인해보시고 왜 높이가 다른지 보시면 될것같아요
텍스트가 ㅁ 안에 포함돼있다면, 텍스트 줄내림으로 그럴수도있고, 이미지가 ㅁ안에 포함돼있다면
이미지 높이가 다를수있습니다.
답변을 작성하시기 전에 로그인 해주세요.
