css - 我怎样才能显示 : block; elements wrap around a floated element like text would?

Question

我进行了一些谷歌搜索，发现了很多关于我试图解决的问题的引用资料，但所有的建议都是我无法使用的相同解决方案。问题是我有一个侧边栏向右浮动，一些 div 需要扩展到侧边栏左侧的宽度，但是当侧边栏不再阻止它们这样做时，它们会扩展到全宽。

jsfiddle 在这里:http://jsfiddle.net/qdk3n/

在别处找到的解决方案是将 overflow: hidden; 应用于 .left 项。这完全达到了我想要的效果:与侧边栏共享​​水平空间的 div 只会扩展到侧边栏，但其他 div 会扩展到允许的最大宽度。不幸的是，左侧 div 中将有一个绝对定位的元素超过了 div 的大小，如果我应用 overflow: hidden;，它将被裁剪，所以我不能使用它。有没有什么方法可以在不使用 overflow: hidden; 的情况下完成我正在尝试做的事情？

注意:在页面呈现之前，我不知道边栏或任何左侧 div 的大小，而且我不能以任何方式、形状或形式使用 Javascript(因为这是为用户工作的禁用 JS)。我唯一可以设置的尺寸是侧边栏的宽度； div 需要流畅，我不能任意选择其中的一些来只扩展部分方式。

另请注意:我见过这个:Div stretch then wrap around other floated div .这正是我想要做的，但唯一真正的解决方案是 overflow: hidden; 属性，我不能使用它。

Answer 1

除非我遗漏了什么，否则我认为不可能完全达到您的要求。

overflow: hidden; 改变 (display: block;) 元素行为的原因是所谓的“Block Formatting Context”，你可以在这里阅读;

https://developer.mozilla.org/en/CSS/block_formatting_contexthttp://www.communitymx.com/content/article.cfm?cid=6BC9D

从技术上讲，您可以保留元素 display: block; 并让它们尊重 float 侧边栏，方法是让您的左侧 div 也 float ，但这不太可能达到您想要的效果。

但是，左侧 div 内的任何内联内容都将尊重 float 侧边栏，所以我真的不认为 div 需要像您描述的那样运行(也许详细说明您背后的原因以获得更有建设性的反馈).