2 div 列：固定和液体。固定的必须是可移动的。液体必须是代码中的第一个

Question

考虑以下 2 cols html 结构：

<div id="container">
    <div class="left">some text</div>
    <div class="right">some text</div>
</div>

CSS：

#container { overflow: hidden; }
.left { float: left; width: 200px; background: red; }
.right { overflow: hidden; background: green; }

jsFiddle 中的相同代码 - http://jsfiddle.net/vny2H/

所以我们有 2 列。左边的列宽是固定的，右边的宽度是液体。 如果我们从 html 中删除左列，右列会拉伸到父级#container 宽度的 100%。

问题是：我们可以改变左右列的顺序吗？ （我需要它来进行 SEO）

<div id="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

谢谢。

---

添加

有一种有趣的方法可以达到我想要的效果，但固定列变得不可移动。该方法基于负边距。 http://jsfiddle.net/YsZNG/

HTML

<div id="container">

    <div id="mainCol">
        <div class="inner">
            <p>Some text</p>
            <p>Some text</p>
            <p>Some text</p>
            <p>Some text</p>
        </div><!-- .inner end -->
    </div><!-- .mainCol end -->

    <div id="sideCol">
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
    </div><!-- .sideCol end -->

</div><!-- #container end -->

CSS

#container { overflow: hidden; width: 100%; }

#mainCol { float: right; width: 100%; margin: 0 0 0 -200px; }
#mainCol .inner { margin: 0 0 0 200px; background: #F63; }

#sideCol { float: left; width: 200px; background: #FCF; }

所以我们有两种方法：

1. 对固定列使用“float”，对液体使用“overflow: hidden”。固定柱变得可移动。但液体在代码中排在第二位。
2. 使用负边距。液体列在代码中排在第一位。但固定的不可拆卸。

是否有第三种方法，当固定柱是可移动的并且液体柱是代码中的第一个时？

---

添加

@lnrbob 建议半决定。主要思想 - 使用类似表格的 div。 http://jsfiddle.net/UmbBF/1/

HTML

<div id="container">
    <div class="right">some text</div>
    <div class="left">some text</div>
</div>

СSS

#container { display: table; width: 100%; }
.right { display: table-cell; background: green; }
.left { display: table-cell;  width: 200px; background: red; }

此方法适用于在站点右侧放置固定列的情况。但是如果我们需要它在左边 - 这似乎是不可能的。

Answer 1

首先考虑您要标记的内容的语义，这几乎总是会产生一个既具有良好标记又对搜索引擎友好的解决方案。

比如.right是页面的主要内容，.left是一些补充信息还是导航？在这种情况下，将其标记为这样，搜索引擎将按照您希望的方式很好地解释它。 HTML5 提供了许多用于此目的的元素：

<div id="container">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">etc.</a></li>
        </ul>
    </nav>
    <article>
        <h1>My nice, juicy content</h1>
        <p>Cool stuff, huh?!</p>
    <article>
</div>

或者对于补充内容，您可以考虑<aside> 或干脆<div role="supplementary">。

Google 会很高兴地挖掘并识别导航和实际内容之间的差异，源顺序很重要的想法不再像几年前那样适用于 SEO。

Answer 2

因为您的元素具有相同的高度，您可以这样做：

#container { overflow: hidden; position:relative; }
.left { float: left; width: 200px; height: 200px; background: red; position:absolute; top:0; left:0; }
.right { overflow: hidden; height: 200px; background: green; margin-left:200px;}

小提琴页面：http://jsfiddle.net/Ptm3R/9/

Answer 3

我仍然认为这是一项毫无意义的努力，因为尝试的唯一原因是为了获得可疑的 SEO 好处。但是，我被拖回这个问题太多次了，所以我要提出一些问题。

如果我迫于死亡的痛苦想出一个纯 CSS 解决方案，就是这样 - 但我不推荐它：

http://jsfiddle.net/RbWgr/

魔法是transform: scaleX(-1);。这应用于.container 以翻转视觉顺序，然后也应用于子divs，这样每个div 的内容 不会被翻转。

• 它在 IE7 中不起作用，因为我使用的是display: table-cell。
• 在 IE8 中并没有那么热 - 任何文本看起来都很可怕，就像 filters 一样。但是，它确实有效。
• 需要额外的 div 包装器才能使其在 Opera 中运行 - 文本看起来并不完美。

它在其他现代浏览器（IE9、Chrome、Safari、Firefox）中运行良好，但将transforms 应用于“每个元素”的父级可能会产生无法预料的后果。

Answer 4

说实话，我不知道你为什么把它归结为只需要使用两个 id ( [#left / #right] OR [#mainCol / # sideCol] )...

使用您在 JSFiddle http://jsfiddle.net/YsZNG/ 中的 mainCol/sideCol 解决方案并引入第三个类，在没有 sideCol 的情况下以编程方式应用于主 div 会不会容易得多。

如http://jsfiddle.net/biznuge/aAE3q/4/

对不起。我很可能错过了这一切的重点，但我之前曾因尝试在流体/固定混合物站点工作而感到痛苦，所以只是想就此事分享我自己的感受......

更新

现在我认为可行，我对此提供了第二个答案。很抱歉重复回答，但它似乎与我最初的反应有很大不同，我认为它会站起来。

Answer 5

取决于您的浏览器支持要求。对于 IE8 及更高版本（以及所有现代浏览器），您可以使用 display: 设置表格布局（当然仍然使用您的 <div />。）

Here is an example - 我只添加了 javascript，因此您可以轻松切换元素是否隐藏:)

Answer 6

把左列放在右列的底部怎么样？

http://jsfiddle.net/vny2H/32/

Answer 7

http://jsfiddle.net/biznuge/aAE3q/12/

这似乎满足了我的想法。无论如何都可以在 FF 中工作，但我不确定其他浏览器会如何对表格类型显示属性做出反应。

更新

已在 FireFox(4)、IE(9)、Opera(11)、Safari(5)[Win] 和 Chrome(12) 中对此进行了测试，并且布局似乎在所有浏览器中都很健壮。

真的很令人惊讶……

澄清后更新

感谢@thirtydot

http://jsfiddle.net/biznuge/aAE3q/19/

据我所知，仅在 Firefox 4 中有效，经过一些简短的检查......但这是一个开始......