CSS流体列（根据内容宽度）

Question

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

+---------+----------------------+-------------------------------+ 
| 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支持。所有列都是透明的，并且不能相互重叠。

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

Answer 1

这个怎么样。

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

Answer 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 */ 
} 

所有列应该是相同的高度，你应该准备好去

Answer 3

试试这个：

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

.group > div { 
    display: table-cell 
} 

jsFiddle example

这样，正确的div不是100％的宽度，但中间div不会扩大它的内容...