jquery - 两个 div 的响应式布局，其中一个具有固定长度的连续

Question

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

我怎样才能做到这一点？

Answer 1

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

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

演示

Answer 3

您不需要 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/