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，以便在阅读网站的文本版本时它是＃1？

Answer 1

使用绝对定位，您可以轻松移动块，无论它们在标记中的显示方式如何。

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

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

1 个答案: