css - 块布局不正确

当第一列相对较高时，就会发生这种情况。
我正在使用float：left。



第三列为高度时，会发生有线连接，float正常运行。
我该如何实现？我使用了内联块，它可以实现我想要的功能，但是我使用的框架使用的是左浮动，并且是响应式设计。所以我不想违反规则。

我使用的代码：

<div class="col-xs-12 col-sm-12 col-md-4 metro-post">
                    <figure>
                        <a href="#"><img src="http://mentalfloss.com/sites/default/files/styles/article_640x430/public/coffee-ban.jpg" class="feature-img-md img-responsive" alt="feature-image"></a>
                    </figure>
                    <footer class="post-info">#December 12, 2013</footer>
                    <a href="#" class="link-sl-second"><h1 class="link-style-xsm">People Blown Over In The Streets As Storm Ivar Hits Norway</h1></a>
                    <p>People Christmas shopping in downtown Aalesund had troubles crossing the street today. The storm "Ivar" was blowing things and people around. One man blew off the sidewalk and into the street in an intersection downtown Aalesund earlier. troubles crossing the street today. The storm "Ivar" was blowing things and people around. One man blew off the sidewalk and into the street in an intersection downtown Aalesund earlier.</p>
                    <div class="post-share">
                        <a href="#"><span>Facebook</span></a>
                        <a href="#"><span>Twitter</span></a>
                        <a href="#"><span>Pinterest</span></a>
                        <a href="#"><span>Google+</span></a>
                        <a href="#"><span>Reddit</span></a>
                    </div>
</div> <!-- end of metro-post -->



.metro-post {
        padding-bottom: 30px;
        overflow:hidden;
        /*float: none;
        display: inline-block;*/
}

.col-md-4 {
width: 33.33333333333333%;
float:left
}

最佳答案

您可以尝试在第三列和第四列之间使用<div class="clearfix"></div>。
在这里提琴：http://jsfiddle.net/myTerminal/xb94J/演示了相同的内容。

关于css - 块布局不正确，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20603556/