jquery - 如何在两列列表中正确使用浮点数

Question

我正在制作一个列表，其中包含两列列表，按日期排序。我想使用以下方法交替不同日子的背景颜色（白色/红色/白色/红色）：

.evenDayBlock {
    background:#red
}

问题是，由于我已经浮动了每个列表项，因此具有类的 div 在evenDayBlock填充列表时没有向下扩展。如果我删除每个列表项的浮动，则 div 会正确展开。如何使用浮点数同时确保父 div 尊重子大小？

更新

好的，我知道我不能用列表项代替 div，因为它会产生邪恶的东西。我在这里更新了小提琴：

全部切换到div。这让我处于一个更好的位置，因为现在 evenDayBlock 被推过第一个oddDayBlock，但它仍然没有扩展到覆盖它包含的所有子 div。

score 3 · Accepted Answer

在更正小提琴的语义之后（请参阅对问题的评论），您应该尝试overflow: hidden在所有浮动元素的父容器上使用（例如，如果s 是浮动的，则在直接父级<li>上使用溢出技巧）。<ul>

或者，您可以使用clearfix方法。

score 1 · Accepted Answer

如果你的块中有浮动元素，并且块的背景没有扩展到其内容的大小，你可以通过在块的样式中添加“overflow:auto”来解决这个问题。

.evenDayBlock {
    background:#red;
    overflow:auto;
}

顺便说一句"#red"，我觉得很奇怪，使用"red"或"#F00"

我希望这可以帮助你。

score -1 · Accepted Answer

我不确定你做对了，但是在你使用花车并想要设置终点线之后，你应该：

<div style="clear:both;">

3 回答 3