CSS - 液柱[复制](CSS - Fluid column [duplicate])

这个问题已经在这里有一个答案：

• DIV布局与3列：固定-液-固定 2个答案

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

我想中间一栏是流体，但左，右colums - 要设置的宽度。 如何使中间流体？ 我希望它看起来是这样的：

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:

工作的jsfiddle演示

你的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。

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

瞧浏览器支持请点击这里

Answer 3:

尝试这个

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

Answer 4:

看看这个，给出了关于这个的解释： 事业部宽像素的100％减去固定量

它解释了所有的细节

最好的解决方案我看到的是使用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);

}

浏览器支持计算的位置： http://caniuse.com/calc

你可以用它作为一个最坏的情况有JS备用。

文章来源: CSS - Fluid column [duplicate]