我想创建一个网页布局,右侧边栏和侧边栏周围的主要内容.
要求:
这可以在没有第三个要求的情况下实现:如果侧边栏位于标记中的主要内容之前并且位于相同的包含元素内,则使用简单的右浮动来完成工作.标记中的主要内容之前的侧边栏不是此处的选项.侧边栏将包含补充信息和广告.如果这是在标记中的主要内容之前,那么对于CSSless浏览器和屏幕阅读器用户来说这将是烦人的(即使使用'skip to ...'链接).
这可以在没有第四项要求的情况下实现.如果侧边栏具有固定高度,我可以在主要内容之前放置一个包含元素,向右浮动并给它一个合适的宽度和高度,然后使用绝对定位将侧边栏放在预制空间的顶部.
示例标记(不含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 - 侧边栏不能在内容之前.
简单的浮动与相反的源顺序是无法完成的（没有 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 周围，并且 #sidebar 将保持位于其顶部。这比移动 #sidebar 更好，因为源顺序保持不变（对于支持 Javascript 的屏幕阅读器等）。
这是一个实际的 JSFiddle。不幸的是，这种布局确实需要保持 floatSpace 高度与侧边栏高度同步。如果侧边栏是动态的或具有延迟加载内容，则必须重新同步。