5

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

要求：

  1. 侧边栏下方的内容应占据所有可用宽度
  2. 侧边栏下方的内容在碰到侧边栏左侧时不应换行
  3. 主要内容应在标记中的侧边栏之前
  4. 侧边栏具有固定宽度但未知/可变高度
  5. CSS-only - 没有 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>

示例布局：

替代文字 http://webignition.net/images/layoutexample.png

我不确定这是否可能。我很高兴接受权威的回答，说明这是无法实现的。如果这不能实现，我会很感激解释——知道为什么不能实现比仅仅被告知不能实现更有价值。

更新：我很高兴看到不满足所有五个要求的答案，只要答案说明忽略了哪个要求以及忽略该要求的后果（利弊）。然后我可以做出明智的妥协。

更新 2：我不能忽略要求 3 - 侧边栏不能位于内容之前。

4

6 回答 6

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 的实际应用。这种布局确实带来了保持浮动空间高度与侧边栏高度同步的不幸要求。如果侧边栏是动态的或具有延迟加载内容，则必须重新同步。

于 2008-11-06T14:17:17.667 回答
2

我相信您将不得不为此更改顺序，将侧边栏放在首位。然后，使用 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>

@乔恩克拉姆 [评论]

好的...非易失性。你说出了自己的答案，同时又拒绝了。

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

于 2008-11-06T09:57:30.953 回答
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>
于 2008-11-06T10:10:03.580 回答
1

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

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

.. 然后确保之后清除它（在#contentdiv 的末尾）。

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

于 2008-11-06T10:01:22.940 回答
0

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

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

于 2008-11-06T10:10:18.930 回答
0

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

于 2008-11-06T10:47:32.553 回答