我需要中心div div#b來填寫div#a和div#c之間的gab。調整div的寬度到網站的寬度
我試圖通過把width: 100%上div#b但沒有運氣做到這一點。
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
float:left;
width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
float:right;
width:50px;
}
我怎樣才能得到div#b擴大從div#a到div#c？
不能換行。
您可以使用CSS3 Flexible Box Layout Module實現這種動態行爲：的
<style type="text/css">
div.Container
{
width: 100%;
display: box;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
}
div.B
{
background: magenta;
box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex: 1;
}
</style>
<div class="Container">
<div style="width: 50px; background: cyan;">
A
</div>
<div class="B">
B
</div>
<div style="width: 50px; background: yellow;">
C
</div>
</div>
一個新版本的Firefox ，新版Google Chrome，Internet Explorer 10和的新版本Safari支持CSS3靈活的盒子佈局。 Internet Explorer 9和Opera目前缺乏支持。
我也想提一提這個新的方式做它在火狐：
<div style="float: left; width: 50px; background: cyan;">
A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
火狐是支持calc功能在目前的瀏覽器。
這裏是舊的方式做到這一點：
<div style="padding-left: 100px;">
<div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
A
</div>
<div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
</div>
的100%容器內div的寬度是容器減去100px左填充的寬度。然後有左右空間div元素50px。然後你必須使用一些負邊界和浮動來定位它們。
使用feature detection與Modernizr。然後，您可以將CSS2用於不支持CSS3 flexbox的瀏覽器。
如果你做.NET開發，你可以用NuGet下載Modernizr。
我自己也碰到過類似的問題。這裏的問題是「寬度：100％」將基本上繼承父容器的寬度。
另一個問題是浮動。當您要求div＃b浮動到div＃a旁邊的左邊時，您不能使用花式邊緣技巧來強制div＃b停留在div＃a之外。 （換句話說，可以使用margin來防止div＃b進入並干擾其任何一側的一定數量的空間）。但是，對於float，margin現在不會將div＃b從邊緣推開該頁面，但遠離div＃a的邊緣。
好的，所以解決方案看起來像這樣。刪除div＃b上的浮動，然後應用左邊距和右邊距，以便div＃b不會干擾任何邊欄。讓div＃b決定它自己的大小（即不要給它一個「寬度」），所以它將適合兩個浮點數。最後，移動div＃b，以便在div＃b放置之前發生浮動，以便div＃b放置在浮點之間。
這裏的新代碼：
<style type="text/css">
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
margin-left: 55px;
margin-right: 55px;
}
div#c
{
float:right;
width:50px;
}
</style>
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
確定利潤率是棘手的。邊框不計算在元素的寬度計算中，所以具有1px邊框的50px寬的div實際上是52px寬。
本文介紹了什麼你正在嘗試做的，我相信：http://www.alistapart.com/articles/holygrail/
我有一種感覺，你不會喜歡這個答案，但最簡單的方法是刪除float: left和任何寬度從div#b，然後切換你的div的順序，所以這兩個側邊欄在你之前主要內容區域。下面的代碼：
HTML：
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
CSS：
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
overflow: hidden;
/*margin: 0 60px;*/
}
div#c
{
float:right;
width:50px;
}
請注意，我申請overflow: hidden到中間的div - 這將迫使其成列（在大多數瀏覽器）。如果你不熟悉「魔術」解決方案（對此有一個合理的解釋，但我永遠不會記住它），那麼可以使用給定的邊距。
他的方法有問題。 如果我在Div3中放置一個塊元素（例如
- 測試
） – ridermansb