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

CSS: Force float to do a whole new line

提问by Paul Tarjan

I have a bunch of float: leftelements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.

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

Here is the page I'm talking about : link

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

If they are all the same size if works beautifully : link

如果它们的尺寸都一样，而且效果很好：链接

Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)

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

回答by Alex Gyoshev

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

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

1. Use clear: lefton the leftmost items - the con is that you'll have a fixed number of columns
2. Make the items equal in height- either by script or by hard-coding the height in the CSS

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

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

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

回答by David Davepermen Sp?rri

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

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

回答by optimiertes

Use display:inline-block

用 display:inline-block

You may also find vertical-align: topor vertical-align:middleuseful.

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

回答by Alex

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 大师。

<p>&nbsp;</p>

回答by Evernoob

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 的中心。对于不同大小的图像，图像之间的边距不会一致，但它会在页面上更好地布局。

回答by Dom

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

添加到.icons div {width:160px; height:130px;}会很好地工作

Hope it will help

希望它会有所帮助

回答by codeasaurus

This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.

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

By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.

通过使用浮动，您要求浏览器自动排列您的控件。当控件不适合其指定浮动排列的宽度时，它通过换行来响应。浮动：左，浮动：右或清除：左，清除：右，清除：两者。

So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:

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

.LeftImages{
    float:left;
}

html

html

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

This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).

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

If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.

如果你仍然希望它们被包裹，你可以给 div 一个像 width:30% 这样的宽度和每个图像的 float:left; 风格。它不会调整到最大的图像，它会改变大小并允许包含的图像换行。