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

Posted 2023-03-17

技术标签:

【中文标题】主要内容流动的右浮动侧边栏 - 如何？【英文标题】：Right-floated sidebar with main content flowed around - how? 【发布时间】：2010-09-21 01:14:42 【问题描述】：

我想创建一个网页布局，侧边栏位于右侧，主要内容围绕侧边栏流动。

要求：

在

javascript

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

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

示例标记（无 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 - 侧边栏不能位于内容之前。

【问题讨论】：

【参考方案1】：

无法完成带有相反源顺序的简单浮动（无 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。这种布局确实带来了保持浮动空间高度与侧边栏高度同步的不幸要求。如果侧边栏是动态的或具有延迟加载内容，则必须重新同步。

【讨论】：

【参考方案2】：

好的，那么这是另一个答案，因为我们可以忽略其中一个要求，所以跳过内容包含在侧边栏下方的第一个要求。

#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>

【讨论】：

【参考方案3】：

我相信您将不得不为此更改顺序，将侧边栏放在首位。然后，使用 CSS 的 float 属性（在不改变顺序的情况下，div#sidebar 最终会出现在段落下方而不是它们旁边）。 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>

@Jon Cram [评论]

好的...nvm。你说出了自己的答案，同时又拒绝了。

您不能将一个元素浮动在它之前定义的其他元素周围。浏览器必须能够回答“围绕什么浮动？”它会从下一个元素开始，并尽可能继续。

【讨论】：

对不起，请看要求：边栏不能在标记中的主要内容之前。【参考方案4】：

如果您可以重新排列您的 HTML，使侧边栏位于内容之前，那么这很容易：

#sidebar  float: right; width: 150px;

.. 然后确保之后将其清除（在#content div 的末尾）。

我知道您的意图是正确的，以正确的顺序提供内容，但除非您期望视觉障碍用户带来大量流量，否则我认为您可能需要重新考虑您的优先事项。

【讨论】：

干杯尼克 - 感谢您考虑我在回答中的意图。在内容之前的标记中有侧边栏对我来说真的不好。我宁愿在内容之后有侧边栏，而不是很好地包装内容。【参考方案5】：

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

不幸的是，绝对定位将使侧边栏脱离流畅的布局，#content 的内容不会如您所愿避开#sidebar。

【讨论】：

【参考方案6】：

我现在没有任何地方可以测试它，我不确定它是否会起作用，但是您是否尝试过将侧边栏 div 显示为 inline 并从那里开始？

【讨论】：

以上是关于主要内容流动的右浮动侧边栏 - 如何？的主要内容，如果未能解决你的问题，请参考以下文章

在css中设置主要内容相对于响应侧边栏宽度的边距[重复]