Ate*_*ral 8 css overflow fluid-layout
我正在为我的博客工作的新主题中使用流畅的布局.我经常在博客上发布代码并<pre>在帖子中包含块.所述float: left内容区域列具有一个max-width以使得该柱停在某个最大宽度,也可以收缩:
+----------+ +------+
| text | | text |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
max shrunk
我想要的是<pre>元素比文本列更宽,以便我可以适应80个字符包装的代码而不需要水平滚动条.但我希望<pre>元素从内容区域溢出,而不影响其流动性:
+----------+ +------+
| text | | text |
| | | |
+----------+--+ +------+------+
| code | | code |
+----------+--+ +------+------+
| | | |
+----------+ +------+
max shrunk
但是,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>元素插入post列中的"break",以便post segment和<pre>segment 的宽度相互独立地管理:
+----------+ +------+
| text | | text |
+----------+ +------+
+-------------+ +-------------+
| code | | code |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
max shrunk
但这迫使我<div>在帖子标记中插入额外的关闭和打开元素,我宁愿在语义上保持原始状态.
不可否认,我并没有完全掌握盒子模型如何与含有溢出内容的浮子一起工作,所以我不明白为什么float: left容器和<pre>内部的组合会使容器的组合瘫痪max-width.
我在Firefox/Chrome/Safari/Opera上观察到同样的问题.IE6(疯狂的)似乎总是很开心.
这似乎也不依赖于怪癖/标准模式.
我做了进一步的测试,观察max-width到当元素有一个时似乎被忽略了float: left.我看了一下W3C盒子模型章节,但是没有立即看到这种行为的明确提及.有什么指针吗？
margin-right: -240px; float: left;在<pre>元素上设置以使其占用尽可能少的水平空间，同时可能会<div>用240px. 请记住确保<p>元素清除两侧的浮动元素 ( clear: both)。完整示例如下：
<!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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</body>
</html>