Question

我想要这个：

+--CONTAINER DIV--------------+ <--- width 50%       | <--- screen edge
|+---------+ +------+ +------+|                      |
||DIV1     | | DIV2 | | DIV3 ||                      |
|+---------+ +------+ +------+|                      |
+-----------------------------+                      |

缩小浏览器窗口宽度时，我希望DIV1相应缩小（尽可能多的像素）。同样，当使窗口更宽时，我希望DIV1占用父容器的所有剩余空间。 DIV2和3是固定宽度的。怎么样？

Answer 1

我已从此示例中删除了所有div的填充和边距。

给容器宽度50％，绝对宽度2和3。 Div 1保持默认auto宽度。

您可以将div 2和3放在标记中，然后将它们向右浮动。然后使div有一个右边距等于2和3宽度加在一起。

请参阅此处的小提琴：http://jsfiddle.net/P33hY/1/

HTML：

<div id="container">
    <div id="two">2</div>
    <div id="three">3</div>
    <div id="one">1 - Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</div>
</div>

的CSS：

div{
    padding:0; margin:0;
}
#container{
    width: 50%;   
    border: 1px solid silver;
    background:gold;
}
#one{
    background:blue;
    margin-right:160px;
}
#two{
    background:green;
}
#three{
    background:red;
}
#two,#three{
    width: 80px;   
    float: right;
}

Answer 2

<div id="right">
    <div id="right1"></div>
    <div id="right2"></div>
</div>
<div id="left"></div>


#right{
    float:right;
    width:400px;
    height:500px;
    background:red;   
}
#right1,#right2{
    width:200px;
    height:500px;
}
#right1{
    background:yellow;
    float:left;
}
#right2{
    background:green
}

#left{
    margin-right: 200px;
    height:500px;
    background:blue;
}

检查http://jsfiddle.net/9dMY5/

处的工作示例

如何使剩下的许多其他左浮动固定宽度的div占据剩余空间？

2 个答案:

检查http://jsfiddle.net/9dMY5/