css - 如何更改CSS模板中的列顺序以将重要内容放在第一位？

Question

我得到了一个 3 列 CSS 模板，其中包含列 tertiaryContent(右)、primaryContent(中)和 secondaryContent(左)。当我使用 Lynx 来“看看机器人看到了什么”时，右边的列首先出现，因为它在 index.php 和 CSS 中的顺序排在第一位，这完全破坏了我的 SEO。即使在 SERP 上，右栏中的文本也会显示在链接下方。

这是我在 index.php 中得到的:

    <div id="outer">
    <div id="header">
    </div>
    <div id="content">
    <div id="tertiaryContent">
    </div>
    <div id="primaryContentContainer">
    <div id="primaryContent">
    </div>
    </div>
    <div id="secondaryContent">
    </div>
    <div class="clear">
    </div>
    </div>

这就是我在 default.css 文件中得到的:

    #outer {padding: 0em; margin: 0em; width: 100%;}
    #header {position: relative; height: 10px;}
    #primaryContentContainer {float: right; margin: 0em -15em 0em -19em; width: 100%;}
    #primaryContent {margin: 0em 15em 0em 15em; padding: 0em 0em 1.5em 4.25em;}
    #secondaryContent {position: relative; float: left; width: 15em; padding: 0 0em 1.5em 1em;}
    #secondaryContent .xbg {position: absolute; right: 0em; bottom: -64px; height: 64px; width: 128px;}
    #tertiaryContent {position: relative; float: right; width: 16em; margin: 0em 0em 0em 0em; padding: 0em 1em 0em 0em;}
    #tertiaryContent .xbg {position: absolute; left: 0em; bottom: -64px; height: 64px; width: 128px;}

我的问题是 - 如何更改此代码以保持相同的布局，但首先按顺序显示 primaryContent，以便在阅读网站的文本版本时它排在第一位？

Answer 1

通过绝对定位，您可以轻松地四处移动 block ，而不管它们在标记中的显示方式如何。

Simplfied Demo

HTML:

<div class="wrap">
<div class="primary content">one</div>
<div class="secondary content">two</div>
<div class="tertiary content">three</div>
</div>

CSS:

.wrap{width:600px; position:relative; margin:0 auto;}
.content{width:200px; height: 500px; position: absolute; top:0;}
.primary {background: salmon; left:200px;}
.secondary{background: lightblue; left: 400px; }
.tertiary{background: goldenrod;}