Wordpress 블로그 루프, 자동 높이로 레이아웃이 깨져졌습니다.

Question

사람들은 블로그 게시물 루프가 한 페이지 당 6 개이고, 나란히있는 'col-md-6' 한 줄에 두 개. 그러나 일부 게시물 따라서 한 쪽이 다른 쪽보다 더 큰 만드는 두 줄에 한 줄 다른 사람에 제목을 가지고 있고, 그 레이아웃을 발생 때 이미지

코드에서 볼 수 있듯이, 상처 입는 상자

<div class="col-md-6 col-sm-12 blog-padding-right"> 
          <div class="single-blog two-column"> 
           <div class="post-thumb"> 
            <a href="<?php the_permalink(); ?>"><div class="div-bg-capa" style="background:url(<?php the_post_thumbnail_url('large'); ?>);width: 100%;height: 200px;margin: 12px 0;background-size: cover;background-position: center;"></div></a> 
           </div> 
           <div class="post-content overflow"> 
            <h2 class="post-title bold"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 
            <p> 
            <?php echo excerpt('20'); ?> 
            </p> 
            <a href="<?php the_permalink(); ?>" class="read-more">Ver mais</a> 
           </div> 
          </div> 
         </div> 

CSS 또는 트렁크 자체를 사용하여 트릭이 있습니까?

Answer 1

귀하의 CSS는 볼 수 없지만 게시물에 수레를 사용하고 있다면 (가장 가능성이있는) 수표에 clear: both을 추가 할 수 있습니다. 그것은 flex-wrap: wrap

.post{ 
 
    background-color: #aaa; 
 
    width: 50%; 
 
    float: left; 
 
    outline: 1px solid black; 
 
} 
 

 
.post:nth-child(odd){ 
 
    background-color: #ddd; 
 
    clear: both; 
 
}

<div class="posts"> 
 
    <div class="post">Lorem ipsum<br>dolor sit</div> 
 
    <div class="post">Lorem ipsum</div> 
 
    <div class="post">Lorem ipsum</div> 
 
    <div class="post">Lorem ipsum<br>dolor sit</div> 
 
    <div class="post">Lorem ipsum</div> 
 
    <div class="post">Lorem ipsum</div> 
 
</div>

보다 더 나은 브라우저 지원이

Answer 2

이 문제를 해결하는 쉬운 방법은 게시물에 게시물 컨테이너에 display: flex; flex-wrap: wrap;, 다음 width: 50%; 사용하는 것입니다.

.posts { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 960px; 
 
    margin: auto; 
 
} 
 

 
.post { 
 
    background: #eee; 
 
    width: 50%; 
 
} 
 

 
.post:nth-child(3) { 
 
    height: 100px; 
 
    background: #aaa; 
 
} 
 

 
.post:nth-child(5) { 
 
    background: #ccc; 
 
    height: 250px; 
 
} 
 

 
.post:nth-child(6) { 
 
    background: #ccc; 
 
    height: 125px; 
 
}

<div class="posts"> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
    <div class="post">asdf</div> 
 
</div>

또한 레이아웃의 종류를 해결 플러그인을 사용할 수 있습니다. 내가 진짜로 좋아하는 벽돌은 - http://masonry.desandro.com/