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具有更好的浏览器支持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; 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/