html - 为 3 列双侧边栏堆叠排列以实现响应式设计

Question

我正在为响应式和移动友好型网站设计一个 3 列布局，其中两列将位于内容区域的两侧。以下是我一直倾向于遵循的典型结构。

<div id="inner-container">
    <aside id="left-sidebar">
       LEFT SIDEBAR
    </aside>
    <div id="content">
       CONTENT
    </div>
    <aside id="right-sidebar">
       RIGHT SIDEBAR
    </aside>
    <div class="clearfix"></div>
</div> <!-- #inner-container -->

但是对于响应式和移动友好的网站，侧边栏不如内容重要，并且大多数情况下我们遵循这样的堆栈顺序:

<div id="inner-container">
    <div id="content">
       CONTENT
    </div>
    <aside id="left-sidebar">
       LEFT SIDEBAR
    </aside>
    <aside id="right-sidebar">
       RIGHT SIDEBAR
    </aside>
    <div class="clearfix"></div>
</div> <!-- #inner-container -->

有了这个，我可以轻松地将两个侧边栏排序在宽度较小的设备中的内容之后。

但是使用以下 CSS，我无法将它们设置为:

[LEFT SIDEBAR][CONTENT][RIGHT SIDEBAR]

#content{
  margin-left: 2.5%;
  float: left;
  position: relative;
  width: 48.0%;
}

#left-sidebar,
#right-sidebar{
  position: relative;
  width: 23.4%;
}

#left-sidebar{
  float: left;
}

#right-sidebar{
  float: right;
}

它将订单带到视觉网站:

[CONTENT][LEFT SIDEBAR][RIGHT SIDEBAR]

我如何将这三个元素堆叠成这样的顺序并放置各自的 CSS，以便我可以实现网页看起来像 (1)，但在移动设备上看起来像 (2)？

(1)+-------++----------------++-------+|       ||                ||       ||       ||                ||       || LEFT  ||     CONTENT    || RIGHT ||       ||                ||       ||       ||                ||       |+-------++----------------++-------+(2)+------+| CONT ||      |+------+| LFT  |+------+| RHT  |+------+

Answer 1

如果您知道宽度，您可以简单地将调整大小时的定位从 absolute 更改为 relative

Demo Fiddle

HTML:

<div id='wrapper'>
    <div id='content'>Content</div>
    <div id='left'>Left</div>
    <div id='right'>Right</div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
}
#left, #right, #content {
    height:300px;
    position:absolute;
}
#left {
    background:yellow;
    width:23.4%;
}
#content {
    background:red;
    width:48.0%;
    left:23.4%;
}
#right {
    background:blue;
    left:71.4%;
    width:23.4%;
}
@media (max-width: 700px) {
    #left, #right, #content {
        display:block;
        position:relative;
        left:auto;
        width:100%;
    }
}