CSS - 流体柱

Question

这是我的代码：http://jsfiddle.net/2Mtcq/。

我希望中间列是流动的，但是左右柱 - 要设置宽度。我如何制作中间液体？我希望它看起来像：

https://dl.dropboxusercontent.com/u/22358199/Screen%20Shot%202013-05-31%20at%2011.00.31%20AM.png

---

body {
    margin:10px;
}

#header {
    width:600px;
    background-color: #f0efee;
}


#main{
    width:600px;
}
#leftcol {
    background-color: #f0efee;
    float:left;
    margin: 10px 10px 10px 0;
    width:100px;
}
#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
}
#rightcol {
    background-color: #FCF;
    float: left;
    margin: 10px 0 10px 0;
    width:100px;
}

#footer {
    width:600px;
    background-color: #f0efee;
    clear:both;
}

Answer 1

Working jsFiddle Demo

将您的HTML更改为：

<div id="main">
    <div id="leftcol">Left</div>
    <div id="rightcol">Right</div>
    <div id="midcol">Middle middle Middle middle Middle middle</div>
</div>

• 我在midcol和left之后放了right。

在你的CSS中：

• 将您的rightcol元素与right一起展开。
• 将midcol的边距更改为margin: 0 110px;（从左侧和右侧，每个110px：100px为列，10px为间隙。
• 将margin: 10px 0;添加到#main元素。
• 删除不必要的属性。

你在这里：

#main {
    width:600px;
    margin: 10px 0;
}

#leftcol {
    background-color: #f0efee;
    float:left;
    width:100px;
}

#midcol {
    background-color: #FFC;
    margin: 0 110px;
}

#rightcol {
    background-color: #FCF;
    float: right;
    width:100px;
}

---

另外，您可以将#main宽度设为100%，以获得整页宽度：

#main {
    width: 100%;
    margin: 10px 0;
}

Answer 2

如果您不支持IE8，可以在CSS上使用calc。

#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
    width: calc(100% - 220px);
}

有关浏览器支持的信息click here

Answer 3

试试这个

#midcol {
    min-width:100px;
    width:auto;
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
}

Answer 4

看看这个，给出一个解释：Div width 100% minus fixed amount of pixels

它解释了所有细节

我看到的最佳解决方案是使用该链接中所述的css calc。

示例：http://jsfiddle.net/2Mtcq/7/

#midcol {
    background-color: #FFC;
    margin: 10px 10px 10px 0;
    float:left;
    width: -moz-calc(100% - 220px);
    width: -webkit-calc(100% - 220px);
    width: calc(100% - 220px);

}

浏览器支持calc：http://caniuse.com/calc

你可以使用它，最糟糕的情况是JS后备。