Question

（为标题道歉。问题比命名要容易得多。）

我有两个元素：内容容器（#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跟随源
从源中删除#ads会导致#content占用其父级（#container）的整个宽度而不进行CSS更改
#content的宽度未明确写入CSS（即，使页面更宽的唯一更改是修改＃容器的宽度）

Answer 1

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

<!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-）。使这项工作，即虽然会有一些javascript写。

Answer 2

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

浮动第二个元素没有指定第一个宽度？

2 个答案: