How to make the leftmost of many other left-floated fixed-width divs occupy remaining space?
I want this:
+--CONTAINER DIV--------------+ <--- width 50% | <--- screen edge
|+---------+开发者_StackOverflow中文版 +------+ +------+| |
||DIV1 | | DIV2 | | DIV3 || |
|+---------+ +------+ +------+| |
+-----------------------------+ |
When shrinking browser window width I want DIV1 to shrink accordingly (as many pixels). And likewise, when making the window wider, I would like DIV1 to occupy all the remaining space of the parent container. DIV2 and 3 are fixed-width. How?
I have removed padding and margin from all divs for this example.
Give container width 50%, and 2 and 3 their absolute width. Div one keeps default auto
width.
You can put div 2 and 3 first in the markup and float them right. Then make div one have a right margin equal to 2 and 3 width added together.
See fiddle here: 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;
}
<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;
}
精彩评论