CSS:强制浮动执行一个全新的行

Question

我有一堆float: left元素,有些元素比其他元素略大.我希望换行符中断并让图像一直向左浮动,而不是卡在更大的元素上.

这是我正在谈论的页面:链接

如果它们都是相同的大小,如果工作得很漂亮:链接

谢谢!(如果我不需要,我宁愿不进入javascript或服务器端脚本)

Answer 1

好吧,如果你真的需要使用float声明,你有两个选择:

1. 使用clear: left最左边的项目 - con是您将拥有固定数量的列
2. 使项目相等height- 通过脚本或通过硬编码CSS中的高度

这两个都是限制性的,因为它们可以解决浮动的工作原理.但是,您可以考虑使用display: inline-block而不是float,这将实现类似的布局.然后,您可以使用调整其对齐方式vertical-align.

Answer 2

我通过删除修改它float:left,然后添加display:inline-block.没有将它用于图像,但也应该工作正常.

Answer 3

这就是我所做的。似乎可以强制换行，但无论如何我都不是 html/css 大师。

<p>&nbsp;</p>

Answer 4

使用 display:inline-block

您也可能发现vertical-align: top或vertical-align:middle有用.