我想创建一个网页布局，并在右侧的侧边栏和主要内容围绕侧边栏流动。
要求:
这可以在没有第三个要求的情况下实现:如果侧边栏位于标记中的主要内容之前，并且位于同一包含元素之内，则只需执行简单的右 float 即可。标记中主要内容之前的侧边栏不是一个选项。侧边栏将包含补充信息和广告。如果这是在标记中的主要内容之前，那么它将使无CSS的浏览器和屏幕阅读器用户(甚至带有“跳到...”链接)也很烦人。
这可以在没有第四要求的情况下实现。如果侧边栏具有固定的高度，我可以在主要内容之前放置一个包含元素，将其正确 float 并提供合适的宽度和高度，然后使用绝对定位将侧边栏放置在预制空间的顶部。
标记示例(无CSS，仅相关位):
<body>
<div id="content">
<p>
Lorem ipsum ....
</p>
<p>
Pellentesque ....
</p>
<div id="sidebar">
/* has some form of fixed width */
</div>
</div>
</body>
布局示例:
alt text http://webignition.net/images/layoutexample.png
我不确定这是否可能。我很高兴接受权威的回答，指出这是无法实现的。如果无法实现这一点，我将不胜感激。有一个解释-知道为什么无法实现比被告知不能实现的意义更大。
更新:我很高兴看到不满足所有五个要求的答案，只要答案说明忽略了哪个要求以及忽略该要求的后果(利弊)。然后，我可以做出明智的妥协。
更新2 :我不能忽略要求3-边栏不能位于内容之前。
最佳答案
没有源顺序相反的简单 float 就无法完成(没有CSS3规范草案)。务实的方法是首先构建一个不错的布局，以支持所需的源顺序。 HTML:
<div id="content" class="noJs">
<div id="floatSpace"></div>
<p>Lorem ipsum ....</p>
<p>Pellentesque ....</p>
<div id="sidebar">content</div>
</div>
CSS:
#content {position:relative;}
#sidebar {width:150px; position:absolute; top:0; right:0;}
.noJs {padding-right:150px;}
.noJs #floatSpace {display:none;}
.js #floatSpace {float:right; width:150px;}
这满足除1和2之外的所有条件。现在，我们添加JS:
$(function () {
// make floatSpace the same height as sidebar
$('#floatSpace').height($('#sidebar').height());
// trigger alternate layout
$('#content')[0].className = 'js';
});
这将使内容在#floatSpace周围 float ，并且#sidebar将保持定位在其顶部。这比移动#sidebar更好，因为源顺序保持不变(对于支持Javascript的屏幕阅读器等)。
这是JSFiddle of this in action。不幸的是，这种布局要求将floatSpace的高度与侧边栏的高度保持同步。如果侧边栏是动态的或具有延迟加载内容，则必须重新同步。
关于html - 带有主要内容的右侧 float 边栏-怎么样？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/268093/