html - 一个浮子在另一个浮子之上

Question

所有的li都是float:left;而第4里已经爬上第1里了。

我希望第 4 里独立存在，而不影响第 1 里。

这是结果 http://jsfiddle.net/TomasRR/s9nQ6/6/embedded/result/

这是代码 http://jsfiddle.net/TomasRR/s9nQ6/6/

<ul>
    <li>
        <div class="front">1</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">2</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">3</div>
        <div class="back">Back</div>
    </li>
    <li>
        <div class="front">4</div>
        <div class="back">Back</div>
    </li>
</ul>

li {
    height: 150px;
    width: 400px;       
    list-style: none;       
    background: red;        
    float: left;        
    margin-right: 20px;     
    margin-bottom: 50px;
    margin-top: 10px;               
}
.front, .back {
    width: 100%;
    height: 100%;
}
.front {    
    background: gray;

}
.back {
    background: yellow;
}

Answer 1

您为 li 设置的高度值似乎小于包含正面和背面的 block 的总高度。当浏览器窗口足够小，并且元素开始换行时，它们将从最后一个向下 150px 开始，因此重叠。您要么需要隐藏背面部分，要么调整您的 li 的高度以考虑元素的全部高度。当换行时，您可能还需要在行与行之间留出一些空间(填充或边距)。