如何使用CSS自動調整div的寬度？

Question

考慮following example：

HTML：

<div class="wrapper"> 
    <div class="left">Some text here</div><div class="right">Hello Stack Overflow</div> 
</div> 

CSS：

.wrapper { 
    border: 1px solid black; 
    width: 400px; 
} 
.left { 
    border: 1px solid green; 
    display: inline-block; 
} 
.right { 
    border: 1px solid red; 
    display: inline-block; 
    float: right; 
} 

我想迫使綠色div寬度要儘可能大，根據寬度紅色的。紅色div的寬度可以根據div的內容而有所不同。所以，例如，如果紅色div的寬度是150px，那麼綠色寬度應該是250px。這應該總是如此：

green div width + red div width = 400px 

我怎麼能實現這個使用CSS？

沒有JavaScript，請...

Answer 1

正如sandeep前面所說，但是force the green div to take up as much space as possible。

.wrapper { 
    border: 1px solid black; 
    width: 400px; 
    display:table; 
} 
.left { 
    border: 1px solid green; 
    display: table-cell; 
    width: 100%; 
} 
.right { 
    border: 1px solid red; 
    display: table-cell; 
} 

請注意，IE7及以下版本不支持divs-as-tables。

Answer 2

化妝是這就是你想要http://jsfiddle.net/sandeep/eGphW/

.wrapper { 
    border: 1px solid black; 
    width: 400px; 
    display:table; 
} 
.left { 
    border: 1px solid green; 
    display: table-cell; 
} 
.right { 
    border: 1px solid red; 
    display: table-cell; 
} 

可以使用div作爲表。