(为标题道歉。这个问题比命名更容易证明。)
我有两个元素:内容容器 (#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 的宽度。这提供了额外的灵 active :布局可用于任何宽度的容器。
但我是一个完美主义者；我不希望广告按源顺序出现在内容之前。
我的问题:有没有一种方法可以完成满足以下要求的布局:
- #ads 在源中跟随#content
- 从源代码中删除#ads 会导致#content 占据其父级 (#container) 的整个宽度，而无需更改 CSS
- #content 的宽度未明确写入 CSS(即，使页面变宽所需的唯一更改是修改#container 的宽度)
最佳答案
如果你不害怕 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。
关于html - 向右浮动第二个元素而不指定第一个元素的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4433931/