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

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

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

要求：

侧边栏下方的内容应占据所有可用宽度

侧边栏下方的内容点击侧边栏左侧时不应换行

主要内容应位于标记中的侧栏之前

侧边栏的宽度固定，但高度未知/可变

仅CSS-无JavaScript解决方案

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

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

标记示例（无CSS，仅相关位）：

乱数假文。。。。


佩伦茨克。。。。

/*具有某种形式的固定宽度*/

布局示例：

我不确定这是否可行。我很高兴接受一个权威性的回答，说这是无法实现的。如果这不能实现，我希望得到一个解释——知道为什么它不能实现比仅仅被告知它不能实现更有价值

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

---

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

我相信您必须更改此操作的顺序，将侧边栏放在第一位。然后，使用CSS的

float

属性（在不改变顺序的情况下，

div#sidebar

将在段落vs旁边结束）<代码>div#侧边栏应根据高度需要伸展

CSS:

HTML:

/*具有某种形式的固定宽度*/

---

@乔恩·克拉姆[评论]

好的，nvm。你陈述了自己的答案，同时拒绝了

---

不能将一个元素浮动在之前定义的其他元素周围。浏览器必须能够回答“围绕什么浮动？”并且它期待下一个元素开始，尽可能继续。如果您可以重新排列HTML，使侧栏位于内容之前，那么这很容易：

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

。。然后确保之后（在

#content

div的末尾）将其清除

---

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

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

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

据我所知，获得想要的侧边栏（没有明显的标记重新排序）的唯一方法是设置

#content{position:relative；}

和

#sidebar{position:absolute；right:0；top:0；}

---

不幸的是，绝对定位会将侧边栏从流动的布局中移除，

\content

的内容不会像您希望的那样避开侧边栏。

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

简单的浮动和相反的源代码顺序无法完成（没有CSS3草稿规范）。务实的方法是首先构建一个好的布局，以支持所需的源代码顺序。HTML:

<div id="content" class="noJs">
  <div id="floatSpace"></div>
  <p>Lorem ipsum ....</p>
  <p>Pellentesque ....</p>
  <div id="sidebar">content</div>
</div>

这满足除1和2之外的所有条件。现在，我们添加JS：

$(function () {
  // make floatSpace the same height as sidebar
  $('#floatSpace').height($('#sidebar').height());
  // trigger alternate layout
  $('#content')[0].className = 'js';
});

这将使内容在#floatSpace周围浮动，而#边栏将保持在其顶部。这比移动侧边栏要好，因为源代码顺序保持不变（对于支持Javascript等的屏幕阅读器）

---

这是一个例子。这种布局确实需要保持浮动空间高度与边栏高度同步。如果侧边栏是动态的或具有延迟加载内容，则必须重新同步

抱歉，请查看要求：侧边栏不得位于标记的主要内容之前。尼克，干杯-我感谢你在回答中考虑到我的意图。在内容之前将侧边栏放在标记中对我来说真的不好。我宁愿在内容后面有侧边栏，而不要让内容很好地包装起来。

<div id="content" class="noJs">
  <div id="floatSpace"></div>
  <p>Lorem ipsum ....</p>
  <p>Pellentesque ....</p>
  <div id="sidebar">content</div>
</div>

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

$(function () {
  // make floatSpace the same height as sidebar
  $('#floatSpace').height($('#sidebar').height());
  // trigger alternate layout
  $('#content')[0].className = 'js';
});