2
  • 我有两个 div
  • 一个固定宽度20px;
  • 我希望第二个 div 占用其父容器的所有可用剩余宽度
  • 我不知道父容器的 px 宽度。我在“%s”中有它

我怎样才能做到这一点?

4

3 回答 3

3

制作第二个 div 的宽度,100%或者auto通过其边距删除第一个 div 的宽度。工作示例:http: //jsfiddle.net/dAryP/

于 2012-08-06T03:07:55.570 回答
2

试试这个:

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()

演示

于 2012-08-06T03:18:20.067 回答
0

您不需要 javascript 来执行此操作,也不需要像其他人发布的那样多的 css;让这家伙需要的东西变得过于复杂:

HTML

<div id='wrapper'>
    <div id='first'/>
       &nbsp;
     </div>
    <div id='second'/>
       second
     </div>    
</div>    

​ CSS

#first {
   width: 20px;
   float: left;
}

非浮动 div 将占据页面宽度的其余部分。

http://jsfiddle.net/thundercracker/MpPLr/28/

于 2012-08-06T05:40:36.567 回答