2 div栏:固定和液体.固定一个必须是可移动的.Liquid one必须是代码中的第一个

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. 使用负边距.Liquid column在代码中排在第一位.但固定一个是不可拆卸的.

有没有第三种方法,当固定列可移动而液体是代码中的第一种？

---

添加

@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">.

谷歌将很乐意抓住这一点,并认识到导航和实际内容之间的差异,源订单重要的想法不再像几年前那样适用于SEO.