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&amp;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&amp;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&amp;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&amp;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개 / 댓글 3개

display: flex;

Copy
.portfolio__grid.three--columns {
    margin: -30px;
    display: flex;
}

또는

display: grid;

Copy
.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%; */
}

로 수정하면 해결은 될것 같은데

별 작업을 하지 않았음에도 한쪽은 동작하고 한쪽은 동작하지 않는다면

왜 차이가 나는지 확인해볼 필요는 있다고 봅니다.

답변에 대한 댓글 1개

혹시 업체명이 노출되서 그런데 지워주실 수 있으실까요? ㅠㅠ
2022-11-07 (월) 23:04:44

URL 올려보세요.

해당 소스 기준이 아니라 외부 CSS 에서 적용되는거일수도 있습니다.

답변에 대한 댓글 1개

혹시 업체명이 노출되서 그런데 지워주실 수 있으실까요? ㅠㅠ
2022-11-07 (월) 22:19:03

floar:left 또는

display:inline-block

가 제대로 되어 있는지 확인해 보세요..

해당 네모의 부모도 어떻게 되어 있는지 봐 보세요..

답변에 대한 댓글 1개

혹시 업체명이 노출되서 그런데 지워주실 수 있으실까요? ㅠㅠ

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