3列布局，如果太窄，最右边的列包裹在中间一列

Question

我想创建一个具有固定宽度左右列的3列布局，而中间列则占用其余空间。这很简单。现在我希望中间列有一个最小宽度，如果总宽度太小，我希望最右边的列用包围中间列。

这是正常的布局：

+----------+ +------------------------------+ +--------------------+
|   LEFT   | |        MIDDLE (main)         | |       RIGHT        |
+----------+ +------------------------------+ +--------------------+

这是一定宽度下的布局：

+----------+ +-------------------------+
|   LEFT   | |      MIDDLE (main)      |
|          | +-------------------------+
|          | +--------------------+
|          | |       RIGHT        |
+----------+ +--------------------+

• 我不介意在HTML中更改DIV的顺序。
• 我不介意将DIV包装在额外的DIV中。

Answer 1

I made a fiddle that has the three columns.它将中间和右列组合在一起并将其浮动在左列旁边。看看它是否能满足您的需求。

Answer 2

从语义上讲，你最好这样设置你的内容：

<div id="main">
...
</div>
<div class="sidebar" id="sidebar-left">
...
</div>
<div class="sidebar" id="sidebar-right">
...
</div>

查看this article on negative margins以了解如何使这项技术发挥作用。

出于某些原因，我推荐这种技术优于其他技术。我选择此方法的主要原因是，通过这样做，您的内容实际上开始在侧边栏之前加载。通过将您的内容放在侧边栏中，您可以获得一些SEO优势。

Answer 3

这个怎么样：http://jsfiddle.net/X3tPJ/

“右”将包裹在“Main”下，但这两个不会在“Left”下包裹。