Html 将div换行导致有趣的行为

如果下面任何嵌套的

div

s的长度大于相邻的

div

，则

div

s不会“正确”换行到下一行

在不将每一行划分到它自己的div中的情况下，有没有办法强制div#5（在下面的示例中）落在div

#1

下面，即使

div

#1

比其他的都高

.视频项目{
利润率：10px29px20px0px；
宽度：208px；
浮动：左；
溢出：隐藏；
}
1
描述太长时会发生这种情况。。。
2
说明
3
说明
4
说明
5
说明
6
说明
7
说明
8
说明
9
说明
10
说明

您需要在div上设置

清除

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>

---

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

---

Ack，它应该是

nth child（4n+1）

——但只在现代浏览器中可用，所以最初的解决方案是应该使用的。这不是wierd行为，而是浮动左div堆栈的方式。想象一下，它们是俄罗斯方块，不是从上到下，而是从右到左。“5 Description”块不能再向左移动了，因为1太高了。谢谢你的解释。请向上给我一个小箭头，它的意思是一样的：）

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

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