css三列布局

我正在嘗試設置頂部，左側，中央，右側，底部的邊框佈局。我看過幾個例子並嘗試過它們，但它們都不起作用。主要問題是左列，中列和右列。我只能得到兩個水平對齊的div，第三個總是低於頁腳。我需要這個可調整大小。中心窗格最好填滿整個邊界。css三列布局

我已經嘗試了左浮動和右浮動，但它沒有區別。

這是我到目前爲止嘗試過的。 http://jsfiddle.net/xQVWs/2/

<body> 
<div class="top-wrapper"> 
    <div class="content-wrapper"> 
     <header> 
      header 
     </header> 
    </div> 
</div> 

<div class="mid-section"> 
    <div class="left-wrapper"> 
     Left Pane 
    </div> 
    <div class="main-content"> 
     Main pane 
    </div> 
    <div class="right-wrapper"> 
     right pane 
    </div> 
</div> 

<div class="bottom-wrapper"> 
    <div class="content-wrapper"> 
     footer 
    </div> 
</div> 

</body>

來源

2013-04-07 jheagle

你可以使用float:left前兩個中間列和第三一個float:right。我會在中間列的包裝上放一個overflow:hidden。

http://jsfiddle.net/zer6N/1/

.mid-section 
{ 
    background-color: blue; 
    width: 100%; 
    height:1000px; 
    overflow:hidden; 
} 

.left-wrapper, .right-wrapper { 
    background: #ffff00; 
    height: 100%; 
    min-height: 100%; 
    width: 21%; 
    display:block; 
    float:left; 
    margin:0; 
} 

.right-wrapper { 
    background:#efefef; 
    float:right; 
} 

.main-content { 
    background-color: black; 
    width: 58%; 
    height: 100%; 
    margin:0; 
    float:left; 
}

來源

2013-04-07 20:37:47 fletch

這是輝煌的，我沒想到讓他們兩個左浮動的。非常感謝，真的把它清理得很好。我一整天都在毆打我。 – jheagle 2013-04-07 21:58:34

很高興我能幫到你。祝你網站好運！ – fletch 2013-04-08 01:05:32

回答

相關問題