Question

我想创建一个网页布局，右侧边栏和侧边栏周围的主要内容。

要求：

侧边栏下方的内容应占据所有可用宽度
侧边栏下方的内容在点击侧边栏左侧时不应换行
主要内容应在

中的侧边栏

侧边栏具有固定宽度但未知/可变高度
仅限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 - 侧边栏不能在内容之前。

Answer 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。这种布局确实伴随着保持floatSpace高度与侧边栏高度同步的不幸要求。如果侧边栏是动态的或具有延迟加载内容，则必须重新同步。

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

@Jon Cram [评论]

好的... NVM。你说出了自己的答案并同时拒绝了。

您不能在其前面定义的其他元素周围浮动元素。浏览器必须能够回答“浮动什么？”它开始寻找下一个要素，并在必要时继续。

Answer 3

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

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

Answer 4

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

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

..然后确保事后清除它（在#content div的末尾）。

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

Answer 5

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

不幸的是，绝对定位会使侧边栏脱离流动的布局而{{1}}的内容无法避免#content。

Answer 6

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

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

6 个答案: