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

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

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

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

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

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

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

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

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

使用display:inline-block

你也可以findvertical-align: topvertical-align:middle有用。

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

 <p>&nbsp;</p> 

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

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

希望它会有所帮助