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

https://stackoverflow.com/questions/2642813

27-09-2019
|

题

我正在为我的博客开发的新主题中使用流体布局。我经常在博客中讨论代码并包括 <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> （呃……）
去除 float: left

我当前使用的解决方法是插入 <pre> 元素在帖子列中变成“breaks”，这样帖子段的宽度和 <pre> 各段相互排斥管理：

+----------+     +------+
| 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> elements 清除两侧的浮动元素（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>

其他提示

我认为这应该可以满足您的要求，但您可能需要稍微调整它才能就地工作。

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

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>

这可能有效

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

相对位置使 pre “弹出”列的尺寸，而不将其从文档流中删除，并且 float 应调整 pre 的宽度以包含其所有内容。

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow