2

我有一个 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？

4

1 回答 1

2

使用绝对定位，您可以轻松地四处移动块，而不管它们在标记中的显示方式。

简化演示

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;}
于 2012-09-01T13:21:05.500 回答