Question

我正在使用我正在为我的博客工作的新主题中的流畅布局。我经常发布关于代码的博客，并在帖子中包含<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>元素插入帖子列中的“中断”，以便帖子片段和<pre>片段的宽度互相排斥：

+----------+     +------+
| text     |     | text | 
+----------+     +------+
+-------------+  +-------------+
| code        |  | code        |
+-------------+  +-------------+
+----------+     +------+
+----------+     +------+
    max           shrunk

但是这迫使我在帖子标记中插入额外的结束和打开<div>元素，我宁愿在语义上保持原始状态。

不可否认，我并没有完全掌握盒子模型如何处理含有溢出内容的浮点数，所以我不明白为什么容器上的float: left与<pre>的组合。在它内部削弱了容器的max-width。

我在Firefox / Chrome / Safari / Opera上观察到同样的问题。 IE6（疯狂的）似乎总是很开心。

这似乎也不依赖于怪癖/标准模式。

更新

我已经做了进一步的测试，观察到max-width在元素有float: left时似乎被忽略了。我瞥了一下W3C盒子模型章节，但是没有立即看到这种行为的明确提及。有什么指针吗？

Answer 1

在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>

Answer 2

我认为这应该做你正在寻找的东西，但你可能需要稍微调整一下才能让它在原地工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <style type="text/css" media="screen">
            body
            {
                margin: 0;
                padding: 0;
            }
            #wrapper
            {
                float: left;
                width: 100%;
            }
            #content
            {
                float: left;
                width: 100%;
                max-width: 500px;

                margin: 0;
                padding: 0;

                font-family: "Trebuchet MS", sans-serif;
                font-size: 12px;
            }
            #content-pad
            {
                margin: 50px;
                padding: 50px 0 40px 50px;
                background-color: #CCC;
            }

            p, pre
            {
                margin: 0 50px 10px 0;
                line-height: 1.6em;
            }

            pre
            {
                padding: 20px;
                width: 560px;

                background-color: #333;
                color: #FFF;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="content">
                <div id="content-pad">
                    <p>Fusce euismod nunc vitae orci vestibulum adipiscing. Nam id quam libero, sed convallis elit. Etiam interdum, urna et imperdiet euismod, nisi erat commodo elit, sed convallis magna est quis sem. Fusce tempor aliquet est, et ornare eros vulputate et. Vivamus arcu augue, pretium vel fermentum in, gravida sed elit. Vestibulum ut ligula ac quam hendrerit ullamcorper. Phasellus id justo augue. Integer a eros ante. Vivamus sapien mi, placerat a viverra pharetra, dignissim sit amet ipsum. Fusce nunc nunc, tempus ut aliquet sit amet, consectetur sed quam. Cras ligula enim, bibendum eget luctus a, convallis sit amet nisl. Nullam in quam in lectus faucibus lobortis vel pulvinar ante.</p>
                    <pre>Here is some code!
We're going to make sure that it has a full eighty characters to play in.
12345678901234567890123456789012345678901234567890123456789012345678901234567890</pre>
                    <p>Nullam in sapien vitae dui tincidunt elementum. Curabitur condimentum vulputate sem ornare pharetra. Fusce in dolor eget neque viverra sagittis a a orci. Vivamus blandit leo eget orci viverra quis hendrerit velit tempus. Donec in erat risus. Nullam scelerisque faucibus ante, ultricies tristique dolor laoreet sit amet. Duis sit amet tortor dolor, vel interdum ipsum. Sed sed nibh vel ipsum commodo cursus. Proin fermentum nunc in velit tincidunt imperdiet sit amet nec neque. Suspendisse neque ante, luctus sit amet pulvinar eu, congue laoreet magna. Aenean sit amet porttitor quam. Mauris hendrerit vulputate tempus. Curabitur mauris magna, laoreet congue rutrum condimentum, condimentum in sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                </div>
            </div>
        </div>

        <!-- this next element just maintains the margin properly -->
        <div style="clear:both; height: 0; overflow: hidden;"></div>
    </body>
</html>

Answer 3

CSS：

pre {
    display: inline-block;
}

适用于Chrome和FireFox，这让我觉得它也适用于至少Opera，Safari和IE8。

如果这打破IE6，您可以使用此选择器从浏览器隐藏规则：

div > pre {
    display: inline-block;
}

在您的示例中（添加了额外的字符）：

<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; display: inline-block;">
function foo() {
    // Lorem ipsum dolor sit amet, consectetur adipisicing elit dfsf sdf sdf sdf sdf
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>

Answer 4

这可能有效

pre {
  position:relative;
  float:left;
  z-index: 1;
}

位置相对使得预先“弹出”列的尺寸而不将其从文档流中移除，并且浮点数应调整预先设置的宽度以包含其所有内容。

流体CSS：具有最大宽度和溢出的浮动列

更新

4 个答案: