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请...
答案 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作为表格。