Question

我有以下代码给了我想要的外观，但我总觉得文档顺序不正确，因为侧边栏应该会更晚出现：

<h1>header</h1>
<div style="float:right">variable height sidebar</div>
variable height content
<h2>sub-section</h2>

桌面上的侧边栏可能会延伸到以下部分，这很好。我宁愿拥有那个比一个大的空白区域（即h2不清楚：右）。

但是，在移动平台上，我希望将侧边栏线性化，并将其放在内容之后。因此，我不得不更改文档顺序，并让它看起来像以前一样。显然，我可以这样做：

<h1>header</h1>
<div style="overflow:auto">
    <div style="float:left">variable height content</div>
    variable height sidebar
</div>
<h2>sub-section</h2>

如果内容很短，请在内容之下留下很大的差距。但我想知道是否有可能保持内容“不开放”，但仍然将侧边栏放在桌面上的h2元素下。

我最关心的浏览器是IE7。我不想要JavaScript解决方案。我尝试过负顶边距，我尝试了绝对内部相对定位，使用了包装元素，但都没有给出一个好的解决方案。总结一下：我希望侧边栏按文档顺序排在第二位;在台式机上，我希望h2清除内容而不是侧边栏，侧边栏位于h1的右上角;在手机上我想要内容和侧边栏都在流动。

这可能吗？

Answer 1

当我理解任务时，你需要这样的东西：http://jsfiddle.net/kizu/yDx9G/

如果您需要侧边栏位于所有内容的底部，并且如果您只定位现代移动平台，则可以尝试使用flexbox或{更改元素的顺序垂直方向媒体查询中的{1}}行为。

adactio.com上有两篇关于此问题的精彩文章：

Answer 2

您是否考虑过将内容包装在容器中？例如：

<div id="content">
  <h1>Header</h1>
  <h2>sub-section</h2>
</div>

<div id="sidebar">
  variable height sidebar
</div>

然后，您可以使用CSS定位将它们放置在任何您想要的位置。一个非常简单的版本：

#content {
  float: left;
}

#sidebar {
  float: right;
}

见here。

相对于祖先或早期兄弟定位元素

2 个答案: