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/

Answer 2

这个不需要你改变你的div的顺序，但确实需要CSS3（弹性框）。 http://jsfiddle.net/pPEmZ/

用3个div填充屏幕

2 个答案: