Question

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

以下是我正在谈论的页面：link

如果它们的尺寸相同，如果效果很好：link

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

Answer 1

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

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

Answer 2

我通过删除float:left并添加display:inline-block来修复它。没有将它用于图像，但也应该正常工作。

Answer 3

使用display:inline-block

您可能还会发现vertical-align: top或vertical-align:middle有用。

Answer 4

这就是我所做的。似乎在强制换行，但我不是一个html / css大师。

<p>&nbsp;</p>

Answer 5

你可以将它们包装在div中并给div设置一个宽度（最宽图像的宽度+边距可能是？）然后浮动div。然后，将图像设置为其包含div的中心。对于不同大小的图像，图像之间的边距不一致，但它在页面上的布局会更好。

Answer 6

添加到.icons div {width:160px; height:130px;}将非常好用

希望它会有所帮助

Answer 7

这是一个旧帖子，链接不再有效，但是因为它是在搜索时出现的，所以我认为我应该发表评论以帮助他人更好地理解问题。

通过使用float，您要求浏览器自动排列控件。当控件不适合其指定的float布局的宽度时，它会通过换行来响应。 float：left，float：right或clear：left，clear：right，clear：both

因此，如果要强制将一堆float：left项均匀地浮动到左列中，则需要让浏览器决定以相同的宽度包装/拆开它们。因为您不想执行任何脚本，所以可以将要浮动的所有控件包装在一个div中。您可能要添加一个新的包装div，其类如下：

.LeftImages{
    float:left;
}

html

<div class="LeftImages">   
  <img...>   
  <img...> 
</div>

此div将自动调整为最大图像的宽度，并且所有图像将始终与div一起向左浮动（不环绕）。

如果您仍然希望它们进行换行，则可以给div加上width：30％的宽度，每个图像的float：left;样式。与其调整为最大图像，不如改变大小，并允许包装包含的图像。