你將如何重新排列這個CSS網格佈局中的列？

Question

我使用下面的模板：

http://www.styleshout.com/templates/preview/KeepItSimple11/index.html

第一列是比它遵循右側的兩個寬。簡而言之，我嘗試對佈局進行重新排序，使較寬的第一列成爲第二列，在兩個較窄的列之間。我花了相當長的時間與基於網格的CSS佈局，但還沒有接近實現這一點。我很感激有關如何實現這一目標的任何指導，有沒有比一個更多的方法？

編輯：感謝您的建議，但請儘可能提供完整的答案。我不確定如何調整答案以完成解決方案。

Answer 1

您是否嘗試過使用「position：relative」？

#left-row { 
    position:relative; 
    left:100px; 
} 

#right-row { 
    position:relative; 
    left:-100px; 
} 

Answer 2

試試這個：

div#content-wrapper #main { 
    left:230px; 
    position:absolute; 
    top:0; 
} 
div#footer-wrapper { 
    clear:both; 
} 
div#content-wrapper { 
    left:0; 
    overflow:hidden; 
    position:relative; 
    top:0; 
} 
#left-columns .omega { 
    float:right; 
} 

...但如果你現在中心柱是有史以來明顯長於邊柱，你將有問題。

Answer 3

你可以改變你的css類的位置。嘗試以下操作：

#RightContent{ 
left: auto; 
right: 0; 
width: 150px; 
background-color: navy; 
} 

#LeftContent{ 
position: absolute; 
top: 0; 
left: 0; 
width: 200px; 
height: 100%; 
background-color: navy; 
} 

#MiddleContent{ 
position: fixed; 
top: 0; 
left: 200px; 
right: 150px; 
bottom: 0; 
overflow: auto; 
background: #fff; 
}