宽度可变的浮动 CSS 容器的问题
我有 3 个宽度未知的浮动容器。周围的容器具有固定的宽度。
-------------
| X | X | X |
-------------
在第三个容器内再次有浮动元素：
---------------------------
| X | X | X [ O | O | O ] |
---------------------------
当这些元素超过周围容器的宽度时会发生什么，单个元素将落入新行（这是非常好的和预期的行为）：
-------------------------
| X | X | X [ O | O | O |
O | O ] |
-------------------------
但我想要的是浮动子元素缩进如下：
---------------------------------------------------------------------------------
| X | X | X [ O | O | O |
O | O ] |
---------------------------------------------------------------------------------
有没有人用 CSS 来解决这个问题？应该也可以在 IE6 中工作。我尝试了很多事情，但迷失在漂浮中。
I have 3 floating containers of unknown width. The surrounding container has a fixed width.
-------------
| X | X | X |
-------------
Inside the third container there are again floating elements:
---------------------------
| X | X | X [ O | O | O ] |
---------------------------
What happens when these elements execeed the width of the surrounding container is that single elements will drop into a new line (which is quite fine and expected behavior):
-------------------------
| X | X | X [ O | O | O |
O | O ] |
-------------------------
But what I want is that the float child elements are indented like this:
---------------------------------------------------------------------------------
| X | X | X [ O | O | O |
O | O ] |
---------------------------------------------------------------------------------
Has anyone a CSS only solution to this problem? Should work in IE6 too. I tried many things but got lost in float.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
尝试此示例重现您的问题。
我什至无法理解你所描述的行为，那里真的只有浮动吗？
如果列元素在没有宽度的情况下浮动，那么每个浮动元素都会随其内容扩展，并且当它不适合容器时，它会下降（整个元素）。如果不设置这些列元素的宽度，则在 CSS 方面您无能为力。
Try this example to reproduce your problem.
I can't even get the behaviour you are describing, are there really only floats there?
If the column-elements are floating without width, then every float will just expand with it's content, and when it doesn't fit in the container, it'll drop down (the whole element). Without setting the width of these column-elements, there is not a lot you can do about it css-wise.
我现在不确定所有棘手的后果 - 也许在 JSFiddle 中显示代码供人们玩耍和？ - 但想到的最好的解决方案可能是围绕三个 O 的另一个包装器，它也向左浮动。
I'm not sure about all the tricky consequences right now - maybe show the code in a JSFiddle for people to play around with? - but the best solution that comes to mind # will probably be another wrapper around the three
Os that floats left as well.