blocks|key|1230788|text|我通过删除float:left并添加display:inline-block修复了这个问题。我还没有将它用于图像，但在那里也应该可以很好地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1230789|entityMap^0|5|A|I|K|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

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

blocks|key|1230836|text|使用display:inline-block|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1230837|您可能还会发现vertical-align:+top或vertical-align:middle很有用。|1230838|entityMap^0|2|K|0|7|J|R|L|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Use <code>display:inline-block</code>

You may also find <code>vertical-align: top</code> or <code>vertical-align:middle</code> useful.

blocks|key|1230724|text|这就是我所做的。看起来在强制换行方面很管用，但无论如何我都不是html/css专家。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230725|&nbsp;|code-block|syntax|javascript|1230726|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;p&gt;&amp;nbsp;&lt;/p&gt;
</code></pre>

blocks|key|1445485|text|您可以将它们包装在一个div中，并为div设置一个宽度(最宽图像的宽度%2B边距？)然后浮动div。然后，将图像设置到其包含的div的中心。对于不同大小的图像，图像之间的页边距不会一致，但它在页面上的布局会更好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445486|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1230622|text|添加到.icons+div+{width:160px;+height:130px;}将会运行得非常好|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1230623|希望能有所帮助|1230624|entityMap^0|3|13|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

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

Hope it will help

blocks|key|1445834|text|这是一个旧帖子，链接不再有效，但由于它出现在我搜索的早期，我认为我应该发表评论，以帮助其他人更好地理解这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1445835|通过使用float，你要求浏览器自动排列你的控件。当控件不适合它们指定的浮动排列的宽度时，它通过换行来响应。float:left、float:right或clear:left、clear:right、clear:both。|1445836|因此，如果你想强制一堆浮动:左边的项均匀地浮动到一个左列中，那么你需要让浏览器决定以相同的宽度包装/解开它们。因为您不想编写任何脚本，所以可以将想要一起浮动的所有控件包装在单个div中。您可能希望添加一个新的包装div，其中的类如下所示：|1445837|.LeftImages{
++++float:left;
}|code-block|syntax|javascript|1445838|html|1445839|<div+class="LeftImages">+++
++<img...>+++
++<img...>+
</div>|1445840|此div将自动调整为最大图像的宽度，并且所有图像将始终随div一起向左浮动(没有换行)。|1445841|如果你仍然想让它们换行，你可以给div设置一个宽度，比如width:30%25，每个图像都是float:left；style。而不是调整到最大的图像，它将改变大小，并允许包含的图像换行。|1445842|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

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:

<pre><code>.LeftImages{
 float:left;
}
</code></pre>

html

<pre><code>&lt;div class="LeftImages"&gt; 
 &lt;img...&gt; 
 &lt;img...&gt; 
&lt;/div&gt;
</code></pre>

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.

I have a bunch of <code>float: left</code> elements 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.

Here is the page I'm talking about : <a href="http://www.stdicon.com/gartoon/" rel="noreferrer">link</a>

If they are all the same size if works beautifully : <a href="http://www.stdicon.com/crystal/" rel="noreferrer">link</a>

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

CSS: Force float to do a whole new line

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一堆float: left元素，其中一些比其他的稍大一些。我希望换行符断开，让图像一直漂浮在左边，而不是停留在更大的元素上。下面是我正在讨论的页面：如果它们都是相同的大小，如果效果很好：谢谢!(如果没有必要，我宁可不使用javascript或服务器端脚本)

问CSS:强制float做一个全新的行
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:强制float做一个全新的行EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:强制float做一个全新的行
EN