false 9 갤러리 정렬관련...
본문
질문을 여기에 해도 될지 모르겠는데
혹시 false9 갤러리에서
이미지 배치가 ㅁ ㅁ ㅁ <- 이렇게 가로로 한 행당 3개씩 이쁘게 배치가 되엇었는데
제가 다른 웹사이트 만들면서 같은 스킨을 똑같은 방식으로 적용을 햇는데
ㅁ
ㅁ
ㅁ
ㅁ
이렇게 세로로 길게 정렬이 되네요...
(깨진거 처럼...)
아래 코드는 세로로 길게 정렬이 되는 홈페이지의 코드구요 보니까 정상 작동하는 곳 가면
진하게 표시한 portfolio__grid hover--one three--columns 안에 있는 item 에 style로
position: absolute; left: 33.3326%; top: 0px; 이게 자동으로 적용이 되서 잘 정렬이 되는데
정렬 오류난 사이트는 아래와 같이 <div class="item"> 이게 끝이더라구요?
심지어 개발자도구로 <div class="item">여기에 위에 적었던 position: absolute; left: 33.3326%; top: 0px;
를 넣게 되면 잘 작동합니다...
왜 그런건지 도저히 알 수가 없어서 질문을 남깁니다.
<div class="portfolio__grid hover--one three--columns">
<div class="sizer"></div>
<div class="item">
<a href="http://odamche.co.kr/bbs/board.php?bo_table=gallery&wr_id=2">
<div class="no_image">No Image</div>
<span class="circle">new</span>
<div class="caption">
<div class="inner">
<h4>1</h4>
<p>3분 전 <span class="sv_member">{작성자}</span></p>
</div>
</div>
</a>
<br>
<div style="color:#333; float:left;" class="txt">
<a href="http://odamche.co.kr/bbs/board.php?bo_table=gallery&wr_id=2">
1</a>
</div>
<div class="txt" style="font-size:9px; color:#999; letter-spacing:0px; float:right; line-height:25px; text-align:right;">
<input type="checkbox" name="chk_wr_id[]" value="2" id="chk_wr_id_0">
</div>
<div style="clear:both;"></div>
</div>
<div class="item">
<a href="http://odamche.co.kr/bbs/board.php?bo_table=gallery&wr_id=1">
<div class="no_image">No Image</div>
<span class="circle">new</span>
<div class="caption">
<div class="inner">
<h4>1</h4>
<p>3분 전 <span class="sv_member">{작성자}</span></p>
</div>
</div>
</a>
<br>
<div style="color:#333; float:left;" class="txt">
<a href="http://odamche.co.kr/bbs/board.php?bo_table=gallery&wr_id=1">
1</a>
</div>
<div class="txt" style="font-size:9px; color:#999; letter-spacing:0px; float:right; line-height:25px; text-align:right;">
<input type="checkbox" name="chk_wr_id[]" value="1" id="chk_wr_id_1">
</div>
<div style="clear:both;"></div>
</div>
</div>
답변 3
floar:left 또는
display:inline-block
가 제대로 되어 있는지 확인해 보세요..
해당 네모의 부모도 어떻게 되어 있는지 봐 보세요..
혹시 업체명이 노출되서 그런데 지워주실 수 있으실까요? ㅠㅠ
URL 올려보세요.
해당 소스 기준이 아니라 외부 CSS 에서 적용되는거일수도 있습니다.
혹시 업체명이 노출되서 그런데 지워주실 수 있으실까요? ㅠㅠ
display: flex;
.portfolio__grid.three--columns {
margin: -30px;
display: flex;
}
또는
display: grid;
.portfolio__grid.three--columns {
margin: -30px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.portfolio__grid.three--columns .item,
.portfolio__grid.three--columns .sizer {
/* width: 33.3333%; */
}
.portfolio__grid .item,
.portfolio__grid .sizer {
/* width: 50%; */
}
로 수정하면 해결은 될것 같은데
별 작업을 하지 않았음에도 한쪽은 동작하고 한쪽은 동작하지 않는다면
왜 차이가 나는지 확인해볼 필요는 있다고 봅니다.
혹시 업체명이 노출되서 그런데 지워주실 수 있으실까요? ㅠㅠ
