3列（左，主，右）站点，但较小的设备主要在第一（主，左，右）

Question

我一直在挠头，没有运气。设计师有一个3列的网站，两个侧边栏和一个主要内容区域。

专为桌面设计，它有左栏，主要内容，右栏。 但是，在较小的设备上，我们希望首先堆叠主要内容。

通常，你可以通过

来完成这项工作

<div id="left" style="float:left;">...</div>
<div id="right" style="float:right;">...</div>
<div id="main" style="margin-left:[width of left col];">...</div>

或

<div id="left" style="float:left;">...</div>
<div id="main" style="float:left;">...</div>
<div id="right" style="float:left;">...</div>

但这并没有解决主要内容区域在响应时首先出现的问题。我唯一的解决方案是首先使用main标记：

<div id="main">...</div> 
<div id="left">...</div>
<div id="right">...</div>

但我无法为桌面设置样式，因为这些div的高度未知。

有什么想法吗？太多了？

感谢。

Answer 1

来自优秀This layout的

Responsive Patterns site似乎就是您正在寻找的。

Answer 2

<div id="left" style="float:left;">...</div>
<div id="main" style="float:left;">...</div>
<div id="right" style="float:left;">...</div>

您可以使用javascript获取第一列（左）和第二列（main）的高度。获得它们的值后，您可以使用它来为它们中的两个放置位置css值。

对于主要，您将指定一个负顶部位置，将其置于顶部，然后在左侧，您将指定正顶部位置。