我正在为我的博客开发的新主题中使用流畅的布局。我经常写关于代码的博客,并<pre>
在帖子中包含块。内容区域的float: left
列有一个max-width
,以便该列在某个最大宽度处停止,也可以缩小:
+----------+ +------+ | 正文 | | 正文 | | | | | | | | | | | | | | | | | | | | | +----------+ +------+ 最大缩小
我想要的是<pre>
元素比文本列更宽,这样我就可以在没有水平滚动条的情况下容纳 80 个字符的包装代码。但我希望<pre>
元素从内容区域溢出,而不影响其流动性:
+----------+ +------+ | 正文 | | 正文 | | | | | +---------+--+ +------+------+ | 代码 | | 代码 | +---------+--+ +------+------+ | | | | +----------+ +------+ 最大缩小
但是,max-width
一旦我将悬垂插入其中,就会停止流动:即使我将浏览器缩小到超出该宽度<pre>
,列的宽度仍保持在指定值。max-width
我已经用这个最低限度的场景重现了这个问题:
<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
我注意到执行以下任一操作都会恢复流动性:
- 删除
<pre>
(doh...) - 去除那个
float: left
我目前使用的解决方法是将<pre>
元素插入到帖子列中的“中断”中,以便帖子段和<pre>
段的宽度相互独占管理:
+----------+ +------+ | 正文 | | 正文 | +----------+ +------+ +-------------+ +-------------+ | 代码 | | 代码 | +-------------+ +-------------+ +----------+ +------+ +----------+ +------+ 最大缩小
但这迫使我<div>
在帖子标记中插入额外的关闭和打开元素,我宁愿在语义上保持原始状态。
诚然,我没有完全理解盒子模型如何与内容溢出的浮动一起工作,所以我不明白为什么float: left
容器上和容器<pre>
内部的组合会削弱max-width
容器的性能。
我在 Firefox/Chrome/Safari/Opera 上观察到同样的问题。IE6(疯狂的)似乎一直都很开心。
这似乎也不依赖于怪癖/标准模式。
更新
我已经进行了进一步的测试以观察max-width
当元素具有float: left
. 我浏览了 W3C 盒子模型章节,但没有立即看到明确提及这种行为。任何指针?