考虑以下的2个列的html结构：
在jsFiddle上的相同代码-http://jsfiddle.net/vny2H/ 所以我们有两列。左列宽度固定，右列宽度是流体的。 如果我们从html中删除左列，则右列会拉伸到父级#container宽度的100％。
问题是：我们能否更改左右列的顺序？ （我需要它来进行搜索引擎优化）
<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/ 所以我们有两列。左列宽度固定，右列宽度是流体的。 如果我们从html中删除左列，则右列会拉伸到父级#container宽度的100％。
问题是：我们能否更改左右列的顺序？ （我需要它来进行搜索引擎优化）
<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; }
我们有两种方法：
- 使用“float”来固定列，“overflow: hidden”来处理可变列。 固定列变得可移动。 但是可变列在代码中排第二。
- 使用负边距。 可变列在代码中排在第一位。 但是固定列不可移动。
是否有第三种方法，使得固定列可移动而可变列在代码中排在第一位？
添加
@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; }
当网站中需要将固定列置于右侧时，此方法适用。但如果我们需要将其置于左侧，则似乎无法实现。