CSS:强制浮动做一个全新的线-CSS:Forcefloattodoawholenewline

76  

Well, if you really need to use float declarations, you have two options:

如果你真的需要使用浮动声明，你有两个选择:

1. Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
2. 使用清楚:在最左边的项目-坏处是你将有固定数量的列
3. Make the items equal in height - either by script or by hard-coding the height in the CSS
4. 使项目的高度相等——无论是通过脚本还是通过硬编码CSS中的高度。

Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.

这两个都是有限的，因为它们围绕着浮动的工作方式。但是，您可以考虑使用display: inline-block而不是float，这将实现类似的布局。然后，您可以使用垂直对齐来调整它们的对齐方式。

57  

I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.

我通过删除float:left和添加display:inline-block来修复它。还没有在图像中使用它，但是在那里应该也可以工作得很好。

5  

Use display:inline-block

使用显示:inline-block

You may also find vertical-align: top or vertical-align:middle useful.

你也可以找到垂直对齐:顶部或垂直对齐:中间有用。

2  

This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.

这就是我所做的。似乎可以强制使用新行，但无论如何我都不是html/css的权威。

1  

You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.

您可以将它们封装在一个div中，给div设置一个宽度(可能是最宽图像的宽度+空白?)，然后浮动div。然后，将图像设置为包含div的中心。不同大小的图片之间的边距并不一致，但在页面上可以更好地显示出来。

0  

Add to .icons div {width:160px; height:130px;} will work out very nicely

添加到.icon div{宽度:160px;高度:130px;}将非常好

Hope it will help

希望它能帮助