html - 响应式 2 列布局问题

Question

我在解决这个难题时遇到了麻烦:我使用的是 2 列布局，右列宽度固定，左列占用剩余空间。两个高度都是可变的。所以像这样:

<div class="sidebar">sidebar</div>
<div class="main-area">main content</div>

<style>
.sidebar { float: right; width: 250px; }
.main-area { position: relative; overflow: hidden; }
</style>

好的，到目前为止一切都很好。但棘手的一点来了。当达到 750 像素的最大宽度时，我正在使用 CSS3 启用 css 更改。我希望侧边栏在下方分解并具有 100% 的宽度(因此它成为主要内容的页脚)。但是，因为在 HTML 代码中，侧边栏 div 必须位于第一个，所以它始终出现在主区域上方。

关于如何布置它有什么想法吗？

非常感谢!

Answer 1

您问题的简单答案是否。如果侧边栏位于 HTML 中的内容区域之前，则不能让侧边栏移动到断点内容下方。至少...不是没有 javascript 和一堆疯狂。

就是说...只需将侧边栏移动到下方您的主要内容 div。从语义上讲，您没有理由不这样做。

<section class="container">
    <div class="main-area">main content</div>
    <div class="sidebar">sidebar</div>
</section>

然而，需要对 CSS 进行一些更改才能实现此目的。它不像以前那样简单，但也不是特别困难。

.container {
    position: relative;
}

.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
}
.main-area {
    background: red;
    margin-right: 250px;
}

Here is a JSFiddle demonstrating it working.

随意向主要内容区域或侧边栏添加不同数量的内容，您会看到两者仍然具有不同的高度且不会相互干扰。