浮动第二个元素是否指定第一个宽度？ [英] Floating Second Element Right w/o Specifying Width of First?
问题描述
（对标题抱歉，问题比命名更容易演示。）
(Apologies for the title. The problem is much more easily demonstrated than named.)
我有两个元素：内容容器（#content） container（#ads）。内容容器将在网站的每个页面上。
I have two elements: a content container (#content) and an ads container (#ads). The content container will be on every page of a site. The ads will be on some pages and are of a fixed width.
<!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>
（好吧，我承认这不是真的但是内容/广告简化使我的问题更加直接。）
(Alright, I admit that this isn't really my code, but the content/ads simplification makes my question a lot more straightforward.)
我在这里基本上是一个完美的设置，它允许#ads列表删除，#content自然回流占据它的空间。此外，我还没有在样式表的任何地方指定#content的宽度。这提供了额外的灵活性：布局可以与任何宽度的容器一起使用。
What I have here is basically a perfect setup in that it allows for the #ads list to be removed, and the #content to naturally reflow to take up its space. Furthermore, I have not specified the width of #content anywhere in the stylesheet. This offers an extra degree of flexibility: the layout can be used with a container of any width.
但我是一个完美主义者;我不希望广告以源顺序排在内容之前。
But I'm a perfectionist; I don't want the ads to come before the content in source order.
我的问题：有一种方法可以完成此布局，满足以下要求：
My question: is there a way to accomplish this layout that satisfies the following requirements:
- #ads在源中的#content之后
- 从源中删除#ads会导致#content
- #content的宽度没有明确写入CSS（即，使页面更宽的唯一变化是：修改＃container的宽度）
推荐答案
如果你不害怕css3你不必麻烦ie）这是可能的：
if you're not scared of css3 (basically meaning, you don't have to bother about ie) this is indeed possible:
<!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-， ）为其他浏览器。让这个工作在ie，虽然会有一些javascript写。
this is firefox only, be sure to apply the corresponding vendor prefixes (-webkit-, -o-) for other browsers. to make this work in ie though there will be some javascript to write.
这篇关于浮动第二个元素是否指定第一个宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
