Resonsive布局两个div一个具有固定长度的连续

Question

• 我有两个div
• 一固定宽度的20像素;
• 我想第二个div取其父容器的所有可用剩余宽度
• 我不知道父容器的px中的宽度。我有'％s'

我该如何做到这一点。请帮忙。

Answer 1

你不需要javascript来做到这一点，也不需要像其他人一样张贴;让这个家伙需要什么样的方式过于复杂：

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/

Answer 2

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

Answer 3

试试这个：

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