将 div 包装到新行导致有趣的行为答案

【问题标题】：Wrapping div to new line causing funny behavior将 div 包装到新行导致有趣的行为
【发布时间】：2012-04-03 22:34:36
【问题描述】：

如果下面任何嵌套的divs 的长度大于相邻的div，则divs 不会“正确”换行到下一行。

如果不将每一行划分到它自己的 div 中，有没有办法强制 div #5（在下面的示例中）落在 div #1 下面，即使 div #1 比其他高？

<style type="text/css">
  .video-item {
    margin: 10px 29px 20px 0px;
    width: 208px;
    float: left;
    overflow: hidden;
  }
</style>

<div style="width: 948px;">
  <div class="video-item">1<br>This is what happens when Description is too long... </div>
  <div class="video-item">2<br>Description</div>
  <div class="video-item">3<br>Description</div>
  <div class="video-item">4<br>Description</div>
  <div class="video-item">5<br>Description</div>
  <div class="video-item">6<br>Description</div>
  <div class="video-item">7<br>Description</div>
  <div class="video-item">8<br>Description</div>
  <div class="video-item">9<br>Description</div>
  <div class="video-item">10<br>Description</div>
</div>

带有偶数描述的示例：

不均匀说明示例：

【问题讨论】：

这不是一个奇怪的行为，它是浮动左 div 堆栈的方式。想象一下，它们是俄罗斯方块，不是从上到下，而是从右到左。 `5 Description` 块不能再向左移动，因为 1 太高了。
感谢 pinouchon 的解释
那么给我一个小箭头，意思是一样的:)

标签： html css row

【解决方案1】：

您需要在 div 上设置 clear CSS 样式，以使其恢复正常流程：

<style type="text/css">
    .video-item {
        margin: 10px 29px 20px 0px; 
        width: 208px; 
        float: left;
        overflow: hidden; 
    }
    .clear {
        clear: left;
    }
</style>

<div style="width: 948px;">
    <div class="video-item">1<br>This is what happens when Description is too long...         </div>
    <div class="video-item">2<br>Description</div>
    <div class="video-item">3<br>Description</div>
    <div class="video-item">4<br>Description</div>
    <div class="video-item clear">5<br>Description</div>
    <div class="video-item">6<br>Description</div>
    <div class="video-item">7<br>Description</div>
    <div class="video-item">8<br>Description</div>
    <div class="video-item clear">9<br>Description</div>
    <div class="video-item">10<br>Description</div>
</div>

使用 CSS3，您可以使用 :nth-child 更动态地实现此目的：

.video-item:nth-child(4n+1) {
    clear: left;
}

【讨论】：

Ack，它应该是 nth-child(4n+1) - 不过只在现代浏览器中可用，所以最初的解决方案是应该使用的解决方案。

【解决方案2】：

另一种解决方案是像这样强制元素的高度：（但@Pete 解决方案更优雅）

.video-item {
    margin: 10px 29px 20px 0px; 
    width: 208px; 
    float: left;
    overflow: hidden; 
    height: 70px;
}

jsFiddle here

【讨论】：