3列布局自動中間列寬度

Question

我想做一個3列布局網頁百分比包裝寬度，固定（像素）左右側寬度和不同的中間列寬度，但我不能讓它爲中間工作柱。這裏是源：

HTML

<aside class="left"> 
    <span>Categories</span> 


</aside> 

<section> 
    <span>Main</span> 

</section> 

<aside class="right"> 
    <span>Test</span> 

</aside> 

CSS

* { 
    margin: 0px; 
    padding: 0px; 

} 

html, body { 
    height: 100%; 
    width: 100%; 

} 

.container { 

    height: 100%; 
    width: 100%; 

} 

.container > aside.left { 
    float: left; 
    width: 197px; 
    border-right: black dashed 3px; 

} 

.container > section { 
    float: left; 
    width: auto; 


} 

.container > aside.right { 
    float: left; 
    background-color: #005f98; 
    width: 200px; 

} 

Answer 1

你看過靈活的盒子模型嗎？ http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Answer 2

嘗試根據百分比設置寬度，因此，例如：

.container > aside.left { 
float: left; 
width: 31%; 
border-right: black dashed 3px; 

} 

.container > section { 
float: left; 
width: 31%; 


} 

.container > aside.right { 
float: left; 
background-color: #005f98; 
width: 31%; 

} 

那如何我已經克服了這個問題之前。

Answer 3

如果指定爲左，右列width和float，中間一列會自動填補空白：

http://jsfiddle.net/xHnDX/4/

正如你所看到的，內容DIV實際上重疊側的div，儘管內容將保留在它們之間。如果你願意，你可以添加一個額外的容器，以彌補內容div的寬度，如下所示：

http://jsfiddle.net/YauQc/

Answer 4

您可以用絕對定位的側邊欄取代你的花車：

<aside class="left"> 
    <span>C</span> 
</aside> 

<section> 
    <span>M</span> 
</section> 

<aside class="right"> 
    <span>T</span> 
</aside> 

而且

.left { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50px; 
    display: block; 
    background: #ffe; 
    height: 100%; 
} 
.right { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50px; 
    display: block; 
    background: #fef; 
    height: 100%; 

} 
section { 
    display: block; 
    margin: 0 50px; /* Margin sized to match the sidebars */ 
    background: #fee; 
} 

直播：http://jsfiddle.net/ambiguous/puPbu/

顏色和大小隻是爲了澄清一切。如果你打算把<div>包裝在一起，那麼你就需要有position: relative來獲得絕對定位的側邊欄在正確的位置。

Answer 5

如果你沒有支持IE7，this will work：

* { 
    margin: 0px; 
    padding: 0px;  
} 
html, body { 
    height: 100%; 
    width: 100%;  
} 

.container { 
    display: table;  
    height: 100%; 
    width: 100%; 
    min-width: 600px; 

} 
.container > aside, .container > section { 
    display: table-cell; 
    width: auto; 
} 
.container > aside.left { 
    width: 197px; 
    border-right: black dashed 3px; 
} 

.container > aside.right { 
    background-color: #005f98; 
    width: 200px; 
} 

Answer 6

CSS3中你可以使用

#multicolumn{ 
    column-count: 3 
} 

檢查它http://jsfiddle.net/ilumin/w7F7c/

參考：http://www.quirksmode.org/css/multicolumn.html