Wordpress博客循环，自动高度打破布局答案

【问题标题】：Wordpress blog loop, automatic height breaks the layoutWordpress博客循环，自动高度打破布局
【发布时间】：2017-02-09 16:31:35
【问题描述】：

好的，伙计们，我有一个博客文章循环，其中每页限制为 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 中是否有一些技巧或使用引导程序本身使其保持这种状态？

【问题讨论】：

标签： html css wordpress loops

【解决方案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>

【讨论】：

【解决方案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>

您还可以使用解决这种布局的插件。我真正喜欢的是 Masonry - http://masonry.desandro.com/

【讨论】：