SEO友好的三欄佈局

Question

我需要佈置，在這個順序有三列的網站：

leftColumn | mainColumn | rightColumn 

leftColumn和rightColumn都是廣告欄，以及mainColumn部分包含所有豐富的搜索引擎優化的內容。

因此，在代碼中，我已經把用於以下順序佈局的div，這樣的主要內容是第一次看到的搜索引擎優化的好處：

<div id="mainColumn"> 
</div> 
<div id="leftColumn"> 
</div> 
<div id="rightColumn"> 
</div> 

我也做到了這樣，這樣，如果用戶正在從移動設備瀏覽頁面，他們將首先看到主要內容，而不是廣告。

所以我的問題是，如何風格的列，以便他們顯示在正確的順序？ 這是一個HTML5/CSS3頁面。

Answer 1

你可以做這樣的事情作爲一個起點：

<div id="mainColumn" class="column">1</div> 
<div id="leftColumn" class="column">2</div> 
<div id="rightColumn" class="column">3</div> 

.column { 
    position:relative; 
    float:left; 
    width:25%; 
} 
#mainColumn { 
    width:50%; 
    left:25%; 
} 
#leftColumn { 
    left:-50%; 
} 

演示：http://jsfiddle.net/bn3t8/

此代碼是非常基本的，可能需要全高的背景上的IE修復和支持列。你可能想看看這個網站的一些更多的防禦策略（強烈推薦）：

http://matthewjamestaylor.com/blog/perfect-3-column.htm