Wordpress博客循环，自动高度中断布局

Question

Ok guys, I have a blog post loop in which the limit is 6 per page, they are side-by-side with a 'col-md-6' getting like this, two per line. However, some posts have the title on one line and others on two lines, thus making one bigger than the other, and when that happens the layout gets broken, as you can see in the image

Code of box

<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>

Is there some trick in css or using the bootstrap itself so it stays that way?

Answer 1

We can not see your css, but if you are using floats for post (which you most likely are), you can add clear: both to odd posts. It has better browser support than 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

An easy way to address this is to use display: flex; flex-wrap: wrap; display: flex; flex-wrap: wrap; on the posts container, then width: 50%; on the posts.

 .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> 

You can also use plugins that address this kind of layout. One I really like is Masonry - http://masonry.desandro.com/