我正在为我的博客工作的新主题中使用流畅的布局.我经常在博客上写代码并包含< pre>帖子内的块.内容区域的float：left列具有最大宽度,以便列停止在某个最大宽度并且也可以缩小：
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
我想要的是< pre>要比文本列宽的元素,以便我可以适应80个字符包装的代码而不需要水平滚动条.但我想要< pre>要从内容区域溢出的元素,而不影响其流动性：
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
但是,一旦我插入悬垂的< 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 …)
>移除浮子：向左
我目前使用的解决方法是插入< pre>将元素转换为post列中的“break”,以便post segment的宽度和< pre>细分受管理：
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
但是这迫使我插入额外的关闭并打开< div>元素进入post标记,我宁愿在语义上保持原始状态.
不可否认,我并没有完全掌握盒子模型如何与具有溢出内容的浮动一起工作,所以我不明白为什么浮动的组合：留在容器上和< pre>在里面它削弱了容器的最大宽度.
我在Firefox / Chrome / Safari / Opera上观察到同样的问题. IE6(疯狂的)似乎总是很开心.
这似乎也不依赖于怪癖/标准模式.
更新
我做了进一步的测试,观察到当元素有一个float：left时,max-width似乎被忽略了.我瞥了一下W3C盒子模型章节,但是没有立即看到这种行为的明确提及.有什么指针吗？
解决方法
设置保证金权利：-240px;向左飘浮;在< pre>上元素使其占据尽可能少的水平空间,同时可能溢出父< div>元素与240px.请务必确保< p>元素清除两侧的浮动元素(清除：两者).完整示例如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Solution</title>
</head>
<body>
<div style="float: left; background-color: cyan; max-width: 460px;">
<p style="background-color: magenta; clear: both;">
Lorem ipsum dolor sit amet,consectetur adipisicing elit.
Lorem ipsum dolor sit amet,consectetur adipisicing elit.
</p>
<pre style="float: left; max-width: 700px;
background-color: yellow; margin-right: -240px;">
function foo() {
// Lorem ipsum dolor sit amet,consectetur adipisicing elit
}
</pre>
<p style="background-color: magenta; clear: both;">
Lorem ipsum dolor sit amet,consectetur adipisicing elit.
</p>
</div>
</body>
</html>
