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

时间:2011-05-03 05:21:15

标签: css html width

考虑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请...

2 个答案:

答案 0 :(得分:5)

正如桑迪普先前所说,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。

答案 1 :(得分:1)

制作你想要的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作为表格。