css-float - 相对于祖先或较早的兄弟定位元素

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>

如果内容很短，则在内容下方留一个大空隙。但我想知道是否有可能保持内容“不 float ”，但仍将侧边栏放在桌面上的 h2 元素下。

我关心的最早的浏览器是IE7。我不想要 JavaScript 解决方案。我试过负上边距，我试过绝对内部相对定位，带有包装元素，但都没有给出好的解决方案。总结一下:我希望侧边栏在文档顺序中排在第二位；在桌面上，我希望 h2 清除内容而不是侧边栏，侧边栏位于 h1 正下方的右上角；在手机上，我希望内容和侧边栏都处于流动状态。

这可能吗？

Answer 1

根据我对任务的理解，您需要这样的东西:http://jsfiddle.net/kizu/yDx9G/

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

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

1. > Article about flexbox
2. > Article about using display:table for changing order of elements