Question

所有的李都漂浮着：左;第四李已经登上了第一名。

我希望第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设置的高度值似乎小于包含正面和背面的块的整体高度。当浏览器窗口变得足够小，并且项目开始中断到新行时，它们将从最后一行开始向下150px，因此您的重叠。您需要隐藏后部或调整li的高度以考虑元素的完整高度。当中断到新行时，您可能还需要在行之间留出一些空格（填充或边距）。

一个浮子位于另一个浮子的顶部

1 个答案: