CSS Float无法正常工作

Question

请浏览fiddle。在这里，我以列表的形式呈现电视季节信息。我正在管理这些列表，通过左/右设置FLOAT来显示下一个。有些 - 列表中的少数几个没有正确显示。

感谢任何帮助。

您可以查看fiddle

Answer 1

你无法用HTML和CSS的当前结构来实现这种外观。你需要

1. 创建列 - 现在我创建了3列 - 您可以根据需要创建任意数量的列。如果您想要使此页面响应，可以使这些列数特定于响应式WEB断点。
2. 将季节列表与每列相关联
3. 将float:left应用于每列
4. 摆脱lef和right div class
5. 而是将此浮动应用于＃3
中提到的列

请访问演示@ https://jsfiddle.net/zm11awhq/5/embedded/result/

如果您不想使用列，则需要为每个季节的div提供min-height。这个最小高度将保持所有原因的标准，因此漂浮将非常恰当。但是这会在页面上留下很多空白区域。

Answer 2

我自己想通了，我刚刚在左侧课堂上添加了clear: left;而在右侧课堂上添加了clear: right;它确定了未正确显示的季节，其余部分将显示为原样。

  

感谢大家的帮助。