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

您可以用絕對定位的側邊欄替換浮子：

<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 2

如果您不必支持IE7， 則可以使用 ：

* {
    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 3

在CSS3中，您可以使用

#multicolumn{
    column-count: 3
}

在http://jsfiddle.net/ilumin/w7F7c/上進行檢查

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

Answer 4

您是否看過撓性盒模型？ http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

Answer 5

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

.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 6

如果為左右列指定width和float ，則中間列將自動填充空白：

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

如您所見，內容div實際上與側div重疊，盡管內容將保留在它們之間。 如果願意，可以添加一個額外的容器來補償content div的寬度，如下所示：

http://jsfiddle.net/YauQc/