右侧边栏主要内容流动 - 如何？ [英] Right-floated sidebar with main content flowed around - how?
问题描述
我想要创建一个网页布局，包括右侧边栏和主要内容在边栏周围。
I'd like to create a webpage layout with the sidebar to the right and the main content flowing around the sidebar.
要求：
- 侧边栏下方的内容应占据所有可用宽度
- 边栏下方的内容在左侧
- 侧边栏具有固定宽度，但未知/变量高度
- 仅限CSS - 无JavaScript解决方案
- Content below the sidebar should occupy all of the available width
- Content below the sidebar should not wrap when it hits the left of the sidebar
- Main content should precede the sidebar in the markup
- Sidebar has fixed width but unknown/variable height
- CSS-only - no JavaScript solutions
如果侧边栏在标记中的主要内容之前，并且在同一个包含元素内，则简单的右侧float执行作业。在标记中的主要内容之前的边栏在这里不是一个选项。侧栏将包含补充信息和广告。如果这是在标记中的主要内容之前，它将是烦人的CSSless浏览器和screenreader用户（即使有跳到...链接）。
This could be achieved without the third requirement: if the sidebar is before the main content in the markup and is within the same containing element, a simple right float does the job. A sidebar before the main content in the markup is not an option here. The sidebar will contain supplemental information and adverts. If this is before the main content in the markup it will be annoying to CSSless browsers and screenreader users (even with 'skip to ...' links).
在没有第四要求的情况下实现。如果侧边栏有固定的高度，我可以在主要内容之前放一个包含元素，向右浮动，给它一个合适的宽度和高度，然后使用绝对定位将侧边栏放在预制空间的顶部。
This could be achieved without the fourth requirement. If the sidebar had a fixed height I could put a containing element before the main content, float it right and give it a suitable width and height and then use absolute positioning to put the sidebar on top of the pre-made space.
示例标记（不含CSS，仅相关位）：
Example markup (without CSS, relevant bits only):
<body>
<div id="content">
<p>
Lorem ipsum ....
</p>
<p>
Pellentesque ....
</p>
<div id="sidebar">
/* has some form of fixed width */
</div>
</div>
</body>
布局示例：
我不知道这是否可能。我很高兴接受一个权威的答复，说这是不能实现的。如果这不能实现，我会欣赏一个解释 - 知道为什么它不能实现比只是被告知它不能更有价值。
I'm not sure if this is possible. I'm happy to accept an authoritative answer stating that this cannot be achieved. If this can't be achieved I'd appreciate an explanation - knowing why it can't be achieved is much more valuable than just being told it can't.
更新：我很高兴看到不符合所有五项要求的答案，只要回答说明了哪些要求被忽略，以及忽略要求的后果（利弊） 。
Update: I'm happy to see answers that don't meet all of the five requirements, so long as an answer states which requirement is being ignored plus the consequences (pros and cons) of ignoring the requirement. I can then make an informed compromise.
更新2 ：我无法忽略要求3 - 侧栏不能位于内容之前。
Update 2: I can't ignore requirement 3 - the sidebar cannot precede the content.
推荐答案
简单的浮动w /反向源顺序只是不能做（无CSS3草稿规格）。务实的方法是首先构建一个支持您所需的源顺序的漂亮布局。 HTML：
Simple floating w/ opposite source order just can't be done (w/o CSS3 draft specs). The pragmatic approach is to first build a nice layout that supports your desired source order. 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之外的所有。现在， / p>
This satisfies all but 1 and 2. Now, we add the JS:
$(function () {
// make floatSpace the same height as sidebar
$('#floatSpace').height($('#sidebar').height());
// trigger alternate layout
$('#content')[0].className = 'js';
});
这将使内容在#floatSpace周围浮动，#sidebar将保持位于其顶部。这比移动#sidebar更好，因为源顺序保持不变（对于支持Javascript等的屏幕阅读器）。
This will make the contents float around #floatSpace, and #sidebar will remain positioned on top of it. This is better than moving #sidebar because source order remains the same (for screenreaders that support Javascript, etc.).
这是一个 JSFiddle在行动。这种布局带来了不幸的要求，即保持floatSpace高度与侧边栏高度同步。如果边栏是动态的或有延迟加载内容，您必须重新同步。
Here's a JSFiddle of this in action. This layout does come with the unfortunate requirement of keeping the floatSpace height in sync with the sidebar height. If the sidebar is dynamic or has lazy-loading content, you must re-sync.
这篇关于右侧边栏主要内容流动 - 如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
