Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the 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.
您可以将它们包装在一个 div 中，并给该 div 一个设定的宽度（可能是最宽图像的宽度 + 边距？），然后浮动 div。然后，将图像设置到其包含的 div 的中心。对于不同尺寸的图像，图像之间的边距不会一致，但它会在页面上布局得更好。
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.
因此，如果您想强制一堆 float:left 项目均匀地浮动到一个左列中，那么您需要让浏览器决定以相同的宽度包装/展开它们。因为您不想执行任何脚本，所以您可以将所有想要浮动的控件包装在一个 div 中。您可能需要添加一个新的包装 div，其类如下：
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
该 div 将自动调整为最大图像的宽度，并且所有图像将始终随该 div 向左浮动（无包装）。
如果你仍然希望它们换行，你可以给 div 一个宽度，如 width:30% 和每个图像 float:left;风格。它不会调整为最大图像，而是会改变大小并允许包含的图像换行。
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:
.LeftImages{
float:left;
}
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).
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 元素内部使用 clear:left;。我想要每个图像旁边分别有文字。感谢所有添加到此线程的人。
CSS
.image-float-left {
float: left;
margin-right: 10px; /* Add some space between the image and text */
}
div {
clear:left;
}
主体
<div>
<img src="https://upload.wikimedia.org/wikipedia/en/f/f6/Outer_Wilds_Steam_artwork.jpg" class="image-float-left">
Outer Wilds<br>
<br>
This game knows how to surprize you and give the feeling of exploration and adventure. Uncovering the secrets of a space. Makes your brain work real hard to figure out how to explore diffrent areas. Echos of the Eye (dlc) is fenominal as well.<br>
</div><br>
<br>
<div>
<img src="nidus-cover.png" class="image-float-left">
<a href="https://www.kbibwod.com/" target="_blank">Nidus</a><br>
<br>
this is the best two player co-op game ive played, hands down. me and my yonger brother love playing this game, its just so mesmorizing<br>
</div>
this is how i got what i wanted working. uses the clear:left; inside of div elements. i wanted text next to each image separately. thanks to everyone who added to this thread.
css
.image-float-left {
float: left;
margin-right: 10px; /* Add some space between the image and text */
}
div {
clear:left;
}
body
<div>
<img src="https://upload.wikimedia.org/wikipedia/en/f/f6/Outer_Wilds_Steam_artwork.jpg" class="image-float-left">
Outer Wilds<br>
<br>
This game knows how to surprize you and give the feeling of exploration and adventure. Uncovering the secrets of a space. Makes your brain work real hard to figure out how to explore diffrent areas. Echos of the Eye (dlc) is fenominal as well.<br>
</div><br>
<br>
<div>
<img src="nidus-cover.png" class="image-float-left">
<a href="https://www.kbibwod.com/" target="_blank">Nidus</a><br>
<br>
this is the best two player co-op game ive played, hands down. me and my yonger brother love playing this game, its just so mesmorizing<br>
</div>
发布评论
评论（8）
好吧，如果您确实需要使用
float声明，您有两个选择：clear: left- 缺点是您将有一个固定的数字列数height相等 - 通过脚本或通过在 CSS 中硬编码高度这两种方法都有限制，因为它们围绕浮动的工作方式进行。但是，您可以考虑使用
display: inline-block而不是float，这将实现类似的布局。然后，您可以使用vertical-align调整它们的对齐方式。Well, if you really need to use
floatdeclarations, you have two options:clear: lefton the leftmost items - the con is that you'll have a fixed number of columnsheight- either by script or by hard-coding the height in the CSSBoth of these are limiting, because they work around how floats work. However, you may consider using
display: inline-blockinstead offloat, which will achieve the similar layout. You can then adjust their alignment usingvertical-align.我通过删除
float:left并添加display:inline-block来修复此问题。尚未将其用于图像，但应该也可以正常工作。I fixed it by removing
float:left, and addingdisplay:inline-blockinstead. Haven't used it for images, but should work fine, there, too.使用
display:inline-block您可能还会发现
vertical-align: top或vertical-align:middle很有用。Use
display:inline-blockYou may also find
vertical-align: toporvertical-align:middleuseful.这就是我所做的。似乎可以强制换行，但无论如何我都不是 html/css 专家。
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
您可以将它们包装在一个 div 中，并给该 div 一个设定的宽度（可能是最宽图像的宽度 + 边距？），然后浮动 div。然后，将图像设置到其包含的 div 的中心。对于不同尺寸的图像，图像之间的边距不会一致，但它会在页面上布局得更好。
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.
这是一篇旧帖子，链接不再有效，但因为它在我所做的搜索中很早就出现了，所以我认为我应该发表评论以帮助其他人更好地理解问题。
通过使用浮动，您要求浏览器自动排列您的控件。当控件不适合其指定浮动排列的宽度时，它会通过换行进行响应。浮动：左、浮动：右或清除：左、清除：右、清除：两者。
因此，如果您想强制一堆 float:left 项目均匀地浮动到一个左列中，那么您需要让浏览器决定以相同的宽度包装/展开它们。因为您不想执行任何脚本，所以您可以将所有想要浮动的控件包装在一个 div 中。您可能需要添加一个新的包装 div，其类如下：
html
该 div 将自动调整为最大图像的宽度，并且所有图像将始终随该 div 向左浮动（无包装）。
如果你仍然希望它们换行，你可以给 div 一个宽度，如 width:30% 和每个图像 float:left;风格。它不会调整为最大图像，而是会改变大小并允许包含的图像换行。
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:
html
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).
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.
添加到
.icons div {width:160px; height:130px;}会很好地工作希望它会有所帮助
Add to
.icons div {width:160px; height:130px;}will work out very nicelyHope it will help
这就是我得到我想要的工作的方式。在 div 元素内部使用
clear:left;。我想要每个图像旁边分别有文字。感谢所有添加到此线程的人。CSS
主体
this is how i got what i wanted working. uses the
clear:left;inside of div elements. i wanted text next to each image separately. thanks to everyone who added to this thread.css
body