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，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 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重叠，尽管内容将保留在它们之间。如果您愿意，可以添加一个额外的容器来补偿内容div的宽度，如下所示：

http://jsfiddle.net/YauQc/

3列布局自动中间列宽

6 个答案: