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

Question

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

如果没有将每一行划分为自己的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>

偶数示例说明：

不均匀的示例说明：

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

Answer 2

另一个解决方案是强制你的元素的高度:(但@Pete解决方案更优雅）

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

jsFiddle here