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

DEMO

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/

两个div的响应式布局，一个固定长度

3 个答案: