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/