如何使用CSS自动调整div的宽度？

Question

考虑以下示例：

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，则绿色 div 的宽度应为 250px。这应该永远是正确的：

green div width + red div width = 400px

我如何使用 CSS 来实现这一点？

没有 JavaScript，请...

Answer 1

正如 Sandeep 之前所说，但是强制绿色 div 占用尽可能多的空间。

.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 作为一张桌子。