CSS 流体列（取决于内容宽度）答案

【问题标题】：CSS fluid columns (depending on content width)CSS 流体列（取决于内容宽度）
【发布时间】：2011-11-12 07:23:38
【问题描述】：

谁能帮我找到这个问题的 CSS 解决方案（是的，没有 JS）：

+---------+----------------------+-------------------------------+
| Fixed   |   Variable           |  Flexible width               |
|   width |      width content   | (adjusting to content width)  |
+---------+----------------------+-------------------------------+

<div>
  <div>Fixed width</div>
  <div>Variable width content</div>
  <div>Flexible width (adjusting to content width)</div>
</div>

注意：需要 IE7 支持。所有列都是透明的，不能相互重叠。

第一列是固定宽度；
第二列是可变宽度（取决于图像尺寸）；
第三列必须占用所有剩余空间。

【问题讨论】：

标签： html css

【解决方案1】：

这个怎么样。

parent -> position:relative;
parent:after -> clear:both
 fixed -> position:absolute
 variable -> float:left;padding-left:a-fixed-num
 flex -> display:block

【讨论】：

【解决方案2】：

@Rufus 的想法是正确的，但它遗漏了一件事。高度。我会推荐几乎相同的东西，只需稍作修改：

.parent {
    position:relative;
}
.parent:after {
    clear: both;
}
.fixed {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px; /* Conflicting absolute position trick */
    width: 150px; /* Or whatever the width you need is */
}
.variable {
    margin-left: 150px; /* Or, again, whatever you need */
    float: left;
    min-height: 100%; /* Don't use a border or padding or this will be messed up */
}
.flex {
    min-height: 100%; /* Same as variable, border or padding could mess this up */
}

所有列的高度应该相同，您应该准备好了

【讨论】：

【解决方案3】：

试试这个：

.group {
    display: table;width: 100%; table-layout: fixed;
}

.group > div {
    display: table-cell
}

jsFiddle example

这样，右边的 div 不是 100% 的宽度，但中间的 div 不会随着它的内容而扩展......

【讨论】：

这不是你想要的吗？我不明白出了什么问题。
我为所有 div 设置了透明背景。因此，如果它们重叠 - 整个设计就会混乱。
似乎是解决方案，但我需要 IE7 支持