如何使用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,则绿色的宽度应为250px.这应该总是如此:

green div width + red div width = 400px

我怎么能用CSS实现这个目标？

没有Javascript请...

Answer 1

正如桑迪普先前所说,但迫使绿色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.