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

工作 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 上使用calc 。

#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

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

它解释了所有细节

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

这里的例子：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 后备。