갤러리 모바일 최신글 불러올때 구멍이 뚫립니다
본문
모바일에서 썸네일의 높이가 변경되어 왼쪽의 썸네일이 밀려나는 현상이 있네요.
그렇다고 왼쪽줄이 다 그런건 아니고, 일부 글만 그렇습니다.
이유가 뭘까요.
아이폰에서는 잘 보이는데 갤럭시 특정 기종에서 이렇게 보이네요.
mob, mob2 값에 height를 지정해서 해보기도 하고, li에 높이를 지정해봤는데도 안되네요.
https://kcsaorg.cafe24.com/index.php?device=mobile
아래는 최신갤러리 모바일 css입니다.
@charset "utf-8";
/* 최근게시물 스킨 (latest) */
.lt {position:relative;margin:0 0 10px;padding:0 10px 15px;border-bottom:0px solid #ddd}
.lt ul {margin:0 0 10px;padding:0;list-style:none;text-align: center}
.lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.lt .mob {float:left;width:46%;max-width:48%;margin:0 2%;padding-bottom: 9px}
.lt .mob2 {float:left;width:46%;max-width:48%;margin:0 2%;padding-bottom: 9px}
.lt .img {width:100%;max-width:100%;height:auto;border:1px solid #ddd}
.lt a {display:block;padding:5px 0;color:#000;text-decoration:none}
.lt .lt_title {display:inline-block;padding:10px 0 20px 0}
.lt .lt_more {position:absolute;top:5px;right:10px}
.lt .cnt_cmt {display:inline-block;margin:0 0 0 3px;font-weight:bold}
.bo_cate {text-align: center !important}
.bo_cate h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
.bo_cate ul {background:#fff;padding-left:1px;border-bottom:1px solid #d9dce3;zoom:1}
.bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
.bo_cate li {display:inline-block}
.bo_cate a {display:block;line-height:24px;padding:15px}
.bo_cate #bo_cate_on {display:inline-block;position:relative;color:#3a8afd}
.bo_cate #bo_cate_on:after {content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;display:inline-block;background:#3a8afd}
#bo_list_total {margin:10px;text-align:center;padding:10px;background:#e3e7ec;color:#8b8b8b;border-radius:3px}
.lt img.title_icon { vertical-align: bottom !important; }
답변 3
보통 float 으로 정렬할때 높이가 다르게 되면 그런 현상이 발생합니다.
위 링크를 개발자 모드로 갤럭시로 테스트 해봐도 별 문제가 없네요.
폰에 남아 있는 캐시 때문에 바로 반영이 안돼 보일수도 있습니다.
이미지 높이가 같다면 텍스트의 높이 차이일수도 있구요. float:left 값을 준 객체의 전체 높이를
체크해보시면 다르다면 어디서 다른지, 이 순서로 찾으시면 쉽게 찾으실수 있습니다.
참고로 display:flex로 정렬 처리 하시면 같은 행에 있는 객체의 높이가 달라도 맞춰서 정렬하기에
이런 오류의 확률이 훨씬 떨어집니다. 한번 참고해 보시는걸 추천드립니다.
.lt a {~;height:30px}
해당 컨테이너에서
overflow: hidden
으로 해 보세요