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

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

QA

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

본문

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

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

이유가 뭘까요.

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

mob, mob2 값에 height를 지정해서 해보기도 하고, li에 높이를 지정해봤는데도 안되네요.

 

https://kcsaorg.cafe24.com/index.php?device=mobile

 

3696680547_1672820591.2309.jpg

 

아래는 최신갤러리 모바일 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 {display:block 부분에 display:flex로 해봐도 안되네요....

a태그 부분에 단순히 display:flex를 주는것이 아니라
감싸고 있는 ul에 display:flex를 적용하고 그 하위 li를 컨트롤 하는것입니다. 간단하진 않아요.
조금 찾아보셔야 합니다.

https://studiomeal.com/archives/197
여기에 정리가 잘되어 있는곳이 있습니다. 한번 보시면 어떤건지 대충감이 오실거라 생각합니다.

.lt a {~;height:30px}

해당 컨테이너에서

 overflow: hidden

으로 해 보세요

답변을 작성하시기 전에 로그인 해주세요.
전체 18
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT