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不會擴大它的內容...