2

tertiaryContent (右)、primaryContent (中央)、secondaryContent (左) の列を持つ 3 列の CSS テンプレートを取得しました。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 を最初に表示して、Web サイトのテキスト バージョンを読むときに 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 に答える