右侧浮动侧边栏主要内容流动 - 如何？

我想创建一个网页布局，其中侧边栏位于右侧，主要内容位于侧边栏。右侧浮动侧边栏主要内容流动 - 如何？

要求：侧边栏下方

内容应占据所有可用的宽度
当它击中边栏的
主要内容应先左侧边栏中下面的内容应该不换标记中的边栏
边栏具有固定宽度但未知/可变高度
仅限CSS - 无JavaScript解决方案纳秒

这可以在没有第三个要求来实现：如果边栏是在标记的主要内容之前和是相同的含元素中，一个简单的右浮动做这项工作。标记中的主要内容之前的侧栏不是此处的选项。侧边栏将包含补充信息和广告。如果这是标记中的主要内容之前，那么对于无CSSless浏览器和屏幕阅读器用户（即使使用“跳转到...”链接）也会很烦人。

这可以在没有第四个要求的情况下实现。如果侧边栏有一个固定的高度，我可以在主要内容之前放置一个容纳元素，将其右侧浮动并给予合适的宽度和高度，然后使用绝对定位将侧边栏放置在预制空间的顶部。

示例标记（不包括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 - 侧边栏不能在内容之前。

来源

2008-11-06 Jon Cram

简单的浮动W /相反的源顺序不能完成（没有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 of this in action。这种布局确实伴随着保持floatSpace高度与边栏高度同步的不幸要求。如果侧栏是动态的或者延迟加载内容，则必须重新同步。

来源

2008-11-06 14:17:17

[jsfiddle]（http://jsfiddle.net/Matte_000/sdo2x966/） – Matmarbon 2014-08-08 08:38:06

我相信你必须改变这个顺序，把侧边栏放在第一位。然后，使用CSS的float属性（在不更改订单的情况下，div#sidebar将最终落在段落下方vs旁边）。 div#sidebar应根据需要拉伸高度。

CSS：

#sidebar { 
    float: right; 
    width: 50px; 
}

HTML：

<body> 
    <div id="content"> 
    <div id="sidebar"> 
     /* has some form of fixed width */ 
    </div> 

    <!-- paragraphs --> 
    </div> 
</body>

@乔恩克拉姆[评论]

好的... NVM。你陈述了你自己的答案，并同时拒绝了它。

您不能在其之前定义的其他元素上浮动元素。浏览器必须能够回答“围绕什么漂浮？”它看起来要开始的下一个元素，尽可能地继续。

来源

2008-11-06 09:57:30

对不起，请查看要求：侧边栏不能在标记中的主要内容之前。 – 2008-11-06 10:01:40

如果你可以重新安排你的HTML这样的侧边栏内容之前，那么这很简单：

#sidebar { float: right; width: 150px; }

..然后只需确保在事后收拾它（在#content div的结束）。

我知道你的意图是在正确的位置，以正确的顺序提供内容，但除非你期望视力受损用户有很多流量，否则我认为你可能需要重新考虑你的优先级。

来源

2008-11-06 10:01:22 nickf

干杯尼克 - 我感谢你考虑我的意图在你的答案。在内容之前加入侧边栏对我来说真的不好。我宁愿在内容后面添加侧边栏，也没有很好地包装内容。 – 2008-11-06 10:08:21

好的，接下来是另一个答案，因为我们可以忽略其中一个要求，所以跳过内容在侧边栏下面的第一个要求。

#sidebar { 
    float: left; 
    width: 100px; 
} 
#actualContent { 
    width: 700px; 
    float: left; 
}

你的代码的唯一变化是，你必须把你的实际内容在另一个包装。

<div id="content"> 
    <div id="actualContent"> 
     <p>...</p> 
     <p>...</p> 
    </div> 
    <div id="sidebar"> 
     <p>...</p> 
    </div> 
</div>

来源

2008-11-06 10:10:03 nickf

据我所知，得到你想要的侧边栏（没有明显的标记重新排序）的唯一方法是设置#content { position: relative; }和#sidebar { position: absolute; right: 0; top: 0; }

不幸的是，绝对定位将采取边栏出流动的如您所愿，#content的布局和内容将不会避免#sidebar。

来源

2008-11-06 10:10:18

我现在没有任何地方可以测试它，而且我不确定它是否可以正常工作，但是您是否尝试将边栏div显示为inline并从那里开始？

来源

2008-11-06 10:47:32 Gabe

感谢您的建议加布 - 尝试，但无济于事。 – 2008-11-06 11:29:37

右侧浮动侧边栏主要内容流动 - 如何？

回答

相关问题