浮动第二个元素向右不指定第一个的宽度？答案

【问题标题】：Floating Second Element Right w/o Specifying Width of First?浮动第二个元素向右不指定第一个的宽度？
【发布时间】：2012-06-06 00:49:26
【问题描述】：

（为标题道歉。这个问题比命名更容易证明。）

我有两个元素：一个内容容器 (#content) 和一个广告容器 (#ads)。内容容器将位于站点的每个页面上。广告将出现在某些页面上，并且宽度固定。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css" media="screen">

        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 800px;
            border: 1px solid blue;
        }

        #ads {
            float: right;
            border: 1px solid lime;
        }

        .ad {
            width: 100px;
            height: 100px;
            background: gray;
        }

        #content {
            overflow: hidden;
            border: 1px solid red;
        }

    </style>

</head>

<body>

    <div id="container">

        <ul id="ads">
            <li class="ad">Buy Coke</li>
            <li class="ad">No, Buy Pepsi!</li>
            <li class="ad">Coke bought more ad space</li>
        </ul>

        <div id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>

    </div>

</body>
</html>

（好吧，我承认这真的不是我的代码，但内容/广告的简化让我的问题更加直接。）

我在这里拥有的基本上是一个完美的设置，因为它允许删除#ads 列表，并允许 #content 自然重排以占用其空间。此外，我没有在样式表的任何地方指定#content 的宽度。这提供了额外的灵活性：布局可以与任何宽度的容器一起使用。

但我是一个完美主义者；我不希望广告按源顺序排在内容之前。

我的问题：有没有办法完成满足以下要求的布局：

#ads 遵循源中的#content
从源中删除 #ads 会导致 #content 占据其父级 (#container) 的整个宽度，而不会更改 CSS
#content 的宽度未明确写入 CSS（即，使页面更宽所需的唯一更改是修改 #container 的宽度）

【问题讨论】：

从您没有为内容设置宽度的那一刻起，在删除广告时占用广告的空白空间是否不合逻辑？这是执行此操作的默认方式
第二个条件很棘手。想不出有什么办法。除了可以通过相对/绝对定位轻松解决。

标签： html css layout css-float

【解决方案1】：

如果你不害怕 css3（基本上意思是，你不必为 ie 操心）这确实是可能的：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{display:-moz-box; -moz-box-orient:horizontal; width:500px; background:yellow;}
        .content{-moz-box-flex:1; background:red;}
        .ads{background:blue; width:100px;}
    </style>
</head>
<body>
    <p>with ads:</p>
    <div class="container">
        <div class="content">content</div>
        <div class="ads">ads</div>
    </div>
    <p>without ads:</p>
    <div class="container">
        <div class="content">content</div>
    </div>    
</body>
</html>

这仅适用于 firefox，请务必为其他浏览器应用相应的供应商前缀（-webkit-、-o-）。使这项工作在 ie 中工作，尽管会有一些 javascript 来编写。

【讨论】：

是的，我想我应该指定，但没有 CSS3。

【解决方案2】：

要求 1 和 3 相互矛盾。如果您希望#ads 跟随源中的#content 并且不为#content 提供宽度，则广告将显示在内容下方而不是右侧。因为#content 没有宽度，它将占据容器的整个宽度。我认为您需要放弃要求1。现在完成的方式绝对没问题。

【讨论】：