要填充div後的所有空格

Question

如何在百分比中設置正確div的寬度，以便填充左側div後的所有空間？

<div id='wrap'> 
    <div id='left'></div> 
    <div id='right'></div> 
</div> 

#wrap { 
    border: 5px solid green; 
    float: left; 
    width: 100%; 
    height: 100px; 
} 
#left { 
    background: black; 
    position: relative; 
    top:0; 
    left: 0; 
    width: 90px; 
    height: 100px; 
    float:left; 
} 
#right { 
    background: grey; 
    position: relative; 
    top:0; 
    right: 0; 
    height: 100px; 
    float:right; 
} 

試了一下：

$(document).ready(function() { 
    var x = $('#left').width(); 
    $('#right').width((100 - x) + '%'); 
}); 

fiddle

Answer 1

使用calc()屬性：

#right{ 
width: calc(100% - 100px); /*<---do it here*/ 
background: grey; 
position: relative; 
top:0; 
right: 0; 
height: 100px; 
} 

不知道，但你也可以用display財產與table, table-row, table-cell做到這一點：

#wrap { 
    border: 5px solid green; 
    float: left; 
    width: 100%; 
    height: 100px; 
    display:table; /*<----here*/ 
} 
#left { 
    background: black; 
    position: relative; 
    top:0; 
    left: 0; 
    width: 90px; 
    height: 100px; 
    display:table-cell; /*<----here*/ 
} 
#right { 
    background: grey; 
    position: relative; 
    top:0; 
    right: 0; 
    height: 100px; 
    display:table-cell; /*<----here*/ 
} 

Answer 2

嘗試CSS3這個http://jsfiddle.net/5cuH2/15/

$(document).ready(function() { 
    var wrap = $('#wrap').width(); 
    var left = $('#left').width(); 
    $('#right').width((wrap-left) + 'px'); 
}); 

Answer 3

您可以設置包裝div的背景色爲灰色，然後用你的左手股利覆蓋的左部。這樣你就不需要任何JS計算。

檢查更新小提琴：http://jsfiddle.net/5cuH2/6/

CSS

#wrap{ 
    border: 5px solid green; 
    width: 100%; 
    height: 100px; 
    background: grey; 
} 
#left{ 
    background: black; 
    position: relative; 
    top:0; 
    left: 0; 
    width: 90px; 
    height: 100px; 
    float:left; 
} 
#right{ 
    position: relative; 
    top:0; 
    right: 0; 
    height: 100px; 
    float:right; 
} 

.clear { 
    clear: both; 
} 

Answer 4

試試這個

$(document).ready(function() { 
    var x = $('#left').width(); 

    var total = $('#wrap').width(); 

    $('#right').css({ 
     width: total - x + "px" 
    }); 
}); 

OR

var x = $('#left').width(); 
    var total = $('#wrap').width(); 
    var leftPer = x * 100/total; 
    $('#right').css({ 
     width: 100 - leftPer + "%" 
    }); 

DEMO

---

Answer 5

試試這個

var x = ($('#left').width()/$('#wrap').width())*100; 
$('#right').width((100 - x) + '%'); 

Answer 6

var dx = $('#wrap').width(); 
var x = $('#left').width(); 
$('#right').width((dx - x) + 'px'); 

Answer 7

使用display:flex .Depending在瀏覽器上執行，你將不得不use'webkit，MOZ ..作爲前綴「。 Flex tutorial

Flex Browser Support

工作示例：JSFIDDLE