CSS - 流体列[重复]答案

【问题标题】：CSS - Fluid column [duplicate]CSS - 流体列[重复]
【发布时间】：2013-06-01 00:29:51
【问题描述】：

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

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;
}

【问题讨论】：

您没有向我们提供指向您的 jsfiddle 的正确链接
在您设置好小提琴后点击“保存”并将该链接发送给我们。
哦，废话，我如何获得独特的墨水？
这里jsfiddle.net/2Mtcq

标签： css fluid-layout

【解决方案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 中：

使用right 浮动您的rightcol 元素。
将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;
}

【讨论】：

但是中间的列不是流动的，它仍然有一个固定的，只是因为左右100px的边距而受到限制，但是例如如果您调整外列的大小，则中间不再与空白区域匹配。见：jsfiddle.net/2Mtcq/5
@BernhardPoiss 它是 fluid，但你看不到它的行为，因为父 #main 是 600px 宽度。将其更改 100%，您将看到它的功能。看到这个jsFiddle。感谢您的评论，我会将其添加到我的答案;)。
啊，这就是诀窍，我没有考虑外部 div 的宽度。
谢谢，看起来不错。我现在无法在 IE7 中进行测试，不知道它是否也适用于此？
嘿，表格的流畅布局，在过去，似乎不那么老套了。

【解决方案2】：

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

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

查看浏览器支持click here

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

【解决方案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 后备。

【讨论】：