WordPress的博客循環，自動高度打破布局

好吧，我有一個博客帖子循環，其中限制是每頁6，他們與'col-md-6'並排這樣得到，每行兩個。然而，一些崗位有一個行和其他兩行標題，從而使一個比另一個大，當這種情況發生的佈局被打破，因爲你可以將圖像WordPress的博客循環，自動高度打破布局

代碼中所看到的箱

<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或使用，使其保持這種方式引導本身的一些把戲？

來源

2017-02-09 Junior

我們看不到你的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>

來源

2017-02-09 17:37:30

一個簡單的方法來解決這個問題是使用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/

來源

2017-02-09 16:40:55

WordPress的博客循環，自動高度打破布局

回答

相關問題