모바일에서 썸네일의 높이가 변경되어 왼쪽의 썸네일이 밀려나는 현상이 있네요.
그렇다고 왼쪽줄이 다 그런건 아니고, 일부 글만 그렇습니다.
이유가 뭘까요.
아이폰에서는 잘 보이는데 갤럭시 특정 기종에서 이렇게 보이네요.
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개 / 댓글 5개
보통 float 으로 정렬할때 높이가 다르게 되면 그런 현상이 발생합니다.
위 링크를 개발자 모드로 갤럭시로 테스트 해봐도 별 문제가 없네요.
폰에 남아 있는 캐시 때문에 바로 반영이 안돼 보일수도 있습니다.
이미지 높이가 같다면 텍스트의 높이 차이일수도 있구요. float:left 값을 준 객체의 전체 높이를
체크해보시면 다르다면 어디서 다른지, 이 순서로 찾으시면 쉽게 찾으실수 있습니다.
참고로 display:flex로 정렬 처리 하시면 같은 행에 있는 객체의 높이가 달라도 맞춰서 정렬하기에
이런 오류의 확률이 훨씬 떨어집니다. 한번 참고해 보시는걸 추천드립니다.
답변에 대한 댓글 3개
감싸고 있는 ul에 display:flex를 적용하고 그 하위 li를 컨트롤 하는것입니다. 간단하진 않아요.
조금 찾아보셔야 합니다.
https://studiomeal.com/archives/197
여기에 정리가 잘되어 있는곳이 있습니다. 한번 보시면 어떤건지 대충감이 오실거라 생각합니다.
해당 컨테이너에서
overflow: hidden
으로 해 보세요
답변에 대한 댓글 1개
.lt a {~;height:30px}
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.
이미지 높이는 같게 출력되는데,
텍스트 높이가 다르게 출력되면서 벌어진 것 같은데,
어디 소스를 손대야 할지 감을 못잡겠네요.
.lt a {display:block 부분에 display:flex로 해봐도 안되네요....