如何使用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作为表。