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; }

所以我们有两种方式：

固定柱使用“float”，液体使用“overflow：hidden”。固定列变为可移动。但是液体在代码中排在第二位。
使用负边距。 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">。

谷歌将很乐意抓住这一点，并认识到导航与实际内容之间的差异，源订单重要的想法不再像几年前那样适用于搜索引擎优化。

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

说实话，我不确定你为什么要煮它只能使用两个id（[＃left / #right] OR [ #mainCol / ＃ sideCol ]）......

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

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

一样

对不起。我可能已经错过了所有这一切，但我曾经尝试过在流体/固定混合物中工作的痛苦，所以我想在这个问题上分享我自己的感受......

<强>更新

我现在提供了第二个答案，我觉得有效。很抱歉双重答案，但它似乎与我最初的反应有很大的不同，我认为它会站在自己的两英尺上。

Answer 4

我仍然认为这是一个相当无意义的努力，因为尝试的唯一理由是可疑的SEO好处。但是，我已经被多次拖回到这个问题，我将带来一些东西。

如果我因为死亡的痛苦而被迫提出一个纯粹的CSS解决方案，就是这样 - 但我不推荐它：

http://jsfiddle.net/RbWgr/

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

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

它在其他现代浏览器（IE9，Chrome，Safari，Firefox）中非常有效，但将transform应用于“每个元素”的父级可能会产生无法预料的后果。

Answer 5

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

Here is an example - 我只添加了javascript，因此您可以切换该元素是否隐藏：）

Answer 6

<击> 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中进行了一些简短的检查......但这是一个开始......

Answer 7

如何将左侧col置于底部的右侧？

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

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

加

加

7 个答案: