块布局无法正确流动

Question

当第一列相对较高时会发生这种情况。 我正在使用浮动：左。

当第三列为高度，浮点运行正常时，会发生有线的事情。 我怎样才能做到这一点？我使用了内联块，它可以实现我想要的功能，但我使用的框架是使用float left并且是响应式设计。所以我不想破坏规则。

我使用的代码：

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

Answer 1

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

Answer 2

这是一个非常常见的问题，因此有多种方法可以做到。

我将从最喜欢的开始。如果您不关心IE8以及之前，那么最简单，最优雅的方法是使用CSS3'nth-child'选择器：

.metro-post {
    float: left;
    display: block;
}
.metro-post:nth-child(3n+1) {
    clear: left;
}

其他方式有点棘手，因为它们也涉及HTML更改，在您的情况下，它们无法正常工作，因为不同分辨率的列数不同。

只是为了回答，一种方法是将每个n（由你选择）列数包装在一个明确的包装器中，该包装器就像一行，如下所示：

<div class="clearfix">    
    <div class="col">
    ...
    </div>
    <div class="col">
    ...
    </div>
    <div class="col">
    ...
    </div>
</div>
<div class="clearfix">    
    <div class="col">
    ...
    </div>
    <div class="col">
    ...
    </div>
    <div class="col">
    ...
    </div>
</div>

或者在每n列之间添加.clear更简单一点，如下所示：

<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>

<div class="clear"></div>

<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>

<div class="clear"></div>

其中：

.clear {
   clear:both;
}

.clearfix:after {
   display: block;
   visibility: hidden;
   height: 0;
   line-height: 0;
   clear: both;
   content: '.';
}