- 我有两个 div
- 一个固定宽度20px;
- 我希望第二个 div 占用其父容器的所有可用剩余宽度
- 我不知道父容器的 px 宽度。我在“%s”中有它
我怎样才能做到这一点?
制作第二个 div 的宽度,100%
或者auto
通过其边距删除第一个 div 的宽度。工作示例:http: //jsfiddle.net/dAryP/
试试这个:
HTML:
<div id='wrapper'>
<div id='first'/>
first
</div>
<div id='second'/>
second
</div>
</div>
CSS:
#first {
width: 20px;
height:50px; // height is set for test
background-color: red
}
#second {
height:50px;
background-color: blue;
}
#wrapper div {
float:left
}
JS:
$(window).resize(function(){
var r = $('#wrapper').width() - 20;
$('#second').width(r)
}).resize()
您不需要 javascript 来执行此操作,也不需要像其他人发布的那样多的 css;让这家伙需要的东西变得过于复杂:
HTML
<div id='wrapper'>
<div id='first'/>
</div>
<div id='second'/>
second
</div>
</div>
CSS
#first {
width: 20px;
float: left;
}
非浮动 div 将占据页面宽度的其余部分。