테스트 사이트 - 개발 중인 베타 버전입니다

갤러리 모바일 최신글 불러올때 구멍이 뚫립니다 채택완료

투마운틴 2년 전 조회 1,206

모바일에서 썸네일의 높이가 변경되어 왼쪽의 썸네일이 밀려나는 현상이 있네요.

그렇다고 왼쪽줄이 다 그런건 아니고, 일부 글만 그렇습니다.

이유가 뭘까요.

아이폰에서는 잘 보이는데 갤럭시 특정 기종에서 이렇게 보이네요.

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개

채택된 답변
+20 포인트
F
2년 전

보통 float 으로 정렬할때 높이가 다르게 되면 그런 현상이 발생합니다.

위 링크를 개발자 모드로 갤럭시로 테스트 해봐도 별 문제가 없네요. 

폰에 남아 있는 캐시 때문에 바로 반영이 안돼 보일수도 있습니다. 

 

이미지 높이가 같다면 텍스트의 높이 차이일수도 있구요. float:left 값을 준 객체의 전체 높이를

체크해보시면 다르다면 어디서 다른지, 이 순서로 찾으시면 쉽게 찾으실수 있습니다. 

 

참고로 display:flex로 정렬 처리 하시면 같은 행에 있는 객체의 높이가 달라도 맞춰서 정렬하기에 

이런 오류의 확률이 훨씬 떨어집니다. 한번 참고해 보시는걸 추천드립니다. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

투마운틴
2년 전
네..웹에서 확인하는 걸로는 오류가 없는데, 실제 갤럭시 모바일 기기에서는 구멍이 뚫리네요.
이미지 높이는 같게 출력되는데,
텍스트 높이가 다르게 출력되면서 벌어진 것 같은데,
어디 소스를 손대야 할지 감을 못잡겠네요.
.lt a {display:block 부분에 display:flex로 해봐도 안되네요....
썽피리
2년 전
a태그 부분에 단순히 display:flex를 주는것이 아니라
감싸고 있는 ul에 display:flex를 적용하고 그 하위 li를 컨트롤 하는것입니다. 간단하진 않아요.
조금 찾아보셔야 합니다.

https://studiomeal.com/archives/197
여기에 정리가 잘되어 있는곳이 있습니다. 한번 보시면 어떤건지 대충감이 오실거라 생각합니다.
투마운틴
2년 전
자세한 답변 감사드립니다. 적용해볼게요.

댓글을 작성하려면 로그인이 필요합니다.

해당 컨테이너에서

 overflow: hidden

으로 해 보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

투마운틴
2년 전
네 답변 감사합니다. 적용해볼게요!

댓글을 작성하려면 로그인이 필요합니다.

2년 전

.lt a {~;height:30px}

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

투마운틴
2년 전
답변 감사합니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인