html - 用 3 个 div 填充屏幕

Question

我有以下情况:

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

div1 和 div3 的宽度固定为 100px，高度为 100%， div3 的高度也为 100%。 我想要的是 div1 向左浮动，div3 向右浮动，div2 应该占用它们之间的剩余空间。我似乎无法让它工作。

有什么帮助吗？

Answer 1

这样写:

CSS:

#div1{
    float:left;
    background:red;
    width:100px;
}
#div3{
    float:right;
    background:green;
    width:100px;
}
#div2{
    overflow:hidden;
    background:blue;
}

HTML

<div id="div1">1</div>
<div id="div3">3</div>
<div id="div2">2</div>

检查这个http://jsfiddle.net/D8836/

已更新

如果你想要等高，那么你可以使用 display:table 属性。检查这个

http://jsfiddle.net/D8836/11/