html/css：3列液体/流体浮动；在 cendered 柱旁边的浮动柱，在浮动时下降到下一个“线”？

Question

所以这是我在 stackoverflow 上的第一个问题，在最终“创建”一个帐户后，我看到了一个相当大的“类似”问题标题列表……但我几乎一直在滥用谷歌来查找回答，但无济于事；所以，就这样吧。

我对 html 和 css 相当陌生，但在过去的

但是，我意识到我想用我的布局做些什么，我似乎无法实现。

我猜每个人都知道“液体”布局，以及显然非常流行的“圣杯”3 列布局。

我想使用这种类型的布局，因为在我看来，它是最美观的……但我想在语义上写我自己的，这样我就不会“复制”任何人，所以我与自己的框架有个人联系，当我查看我的标记时，不必弄清楚别人在想什么。

目标如下：

我希望我的主要内容位于中间，由 2 个“侧栏”列包裹，并且我希望整个内容为“液体”，从全分辨率一直到 320 像素宽。

但是，出于 SEO 的目的，我希望我的“主要内容”列（中间的）在 DOM 树中排在第一位，并且我希望我的侧边栏：

1st) 随着页面宽度流畅地收缩，然后 2nd）随着页面变得非常狭窄，我希望“主要内容”（中间）列向左“对齐”，保持在顶部，并且是 100% 宽度，而 3）侧栏“snap”“在”主内容栏“下方”，每栏占据50%的宽度，

这样：所有 3 列总是占据页面的整个宽度，并且当侧栏“卡入”时，它们与“中间”列的宽度相同。

类似这样的：

|2222111111113333|
|________________|

|222111111333| <--
|____________|

|22111133| <--
|________|

*snap*(a)

|1111| <--
|2233|
|____|

|11| <--
|11|
|22|
|33|

或：捕捉(b)

|111111| <--
|222333|
|______|

|111| <--
|111|
|222|
|333|

|11| <--
|11|
|11|
|22|
|2_|
|33|
|3_|

看看我在说什么？

问题出在这里：

我已经尝试了所有我能想到或搜索的东西，尝试......似乎只有“没有办法”让 css 使“DOM：1st/middle”列保持在中间，并且在顶部，同时还保持两个侧栏对称，并保留空间，并将所有 3 列始终保持在一个漂亮、整洁的盒子中。

我设法使中间列保持在顶部，并在 DOM 中排名第一，但这样做会给侧列带来混乱和无序，因为 #2 必须在带有 #1 的 div 内，对于 1/ mid 保持领先，但将 #3 放在该 div 中会搞砸一切。

这个一个小问题让我非常沮丧，现在我已经为此苦苦挣扎了好几个星期。 （我大约 2 个月前才开始学习 html 和 css；我一半的时间都花在了这个问题上）

如果有人确切地知道我在说什么并试图做什么，并且知道：

A) 这是否可能

B) 怎么做

我非常想知道...因为我真的很想超越这个小问题（阅读：HUGE），继续我的统治世界之路。

TL;DR:

想做“|213|”变成：

|1|
|2|
|3|

没有变成这样：

|_1_|
|2__|
|__3|

或者这个：

|_1_|
|2_3|
|___|

在最大和最小屏幕之间的任何点。

有可能吗？还是我应该（放弃并）调整我的布局策略并继续前进？

Answer 1

我认为这是您正在寻找的东西：

http://jsfiddle.net/grc4/kcX5n/

当窗口调整大小时，它使用 jQuery 来修改页面的布局。另一种方法可能是使用 css3 媒体查询，但我不确定您将如何更改元素的顺序（从 213 到 123）。

Answer 2

老问题，但我认为这很简单的css：

#col1{float:right}
#col2{float:left}
#col3{float:right}