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

我有一堆float: left元素，有些比其他人略大。 我希望换行符能够打破并且将图像一直拖到左侧，而不是卡在更大的元素上。

这里是我正在谈论的网页： 链接

如果他们都是相同的大小，如果漂亮的作品： 链接

谢谢！ （我不想进入JavaScript或服务器端脚本，如果我不需要）

Answer 1

那么，如果你真的需要使用float声明，你有两个select：

1. 使用clear: left在最左边的项目 – con是你将有固定数量的列
2. 使项目的height相等 – 无论是通过脚本还是通过在CSS中对高度进行硬编码

这两个都是限制性的，因为它们围绕着浮动工作。 但是，您可以考虑使用display: inline-block而不是float ，这将实现类似的布局。 然后可以使用vertical-alignalignment来vertical-align 。

Answer 2

我通过删除float:left ，并添加display:inline-block来修复它。 没有使用它的图像，但应该工作得很好，也有。

Answer 3

使用display:inline-block

你也可以findvertical-align: top或vertical-align:middle有用。

Answer 4

这就是我所做的。 似乎在强制一个新的行，但我不是任何措施的HTML / CSS大师。

 <p>&nbsp;</p> 

Answer 5

你可以将它们包装在一个div中，给div设置一个宽度（最宽的图像的宽度+ margin可能？），然后浮动div。 然后，将图像设置为包含div的中心。 图像之间的边距对于不同尺寸的图像来说不一致，但会更好地放在页面上。

Answer 6

添加到.icons div {width：160px; 身高：130px;}会很好的工作

希望它会有所帮助