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