如何自動調整中間div寬度？

當有3個物品/ div /元素我怎樣才能讓中間div自動調整到100％的寬度？如何自動調整中間div寬度？

像

<div style="width:500px; height:50px;"> 
<div style="float:left; width:50px; height:50px; background-color:red;"> 
a 
</div> 

<div style="float:right; width:50px; height:50px; background-color:red;"> 
b 
</div> 
<div style="width:auto; height:60px; background-color:blue;"> 
middle 
</div> 
    <div style="clear:both;"></div> 
</div>

我不應該使用固定寬度的中間格，作爲家長的div寬度500像素將響應寬，同時改變瀏覽器的大小調整。

我也試着像

來源

2014-10-04 lock

你只需要改變：

<div style="width:auto; height:60px; background-color:blue;">

要

<div style="margin: 0 50px; height:60px; background-color:blue;">

而且如你預期它會工作。

小提琴：http://jsfiddle.net/o0twxh5j/

希望這有助於

來源

2014-10-04 15:09:53 emmanuel

使用寬度：100％，它會佔用全部可用空間。

來源

2014-10-04 15:10:52 waqas

不，是行不通的。 – lock 2014-10-04 15:11:02

將佔用瀏覽器寬度的100％，不會隨浮動項目進行調整。 – lock 2014-10-04 15:11:39

您可以使用CSS TABLES

html, 
 
body { 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.left, 
 
.middle, 
 
.right { 
 
    display: table-cell; 
 
} 
 
.left { 
 
    width: 100px; /*whatever you need here */ 
 
    min-width: 100px; /*whatever you need here */ 
 
    background: #ff0; 
 
} 
 
.right { 
 
    width: 200px; /*whatever you need here */ 
 
    min-width: 200px; /*whatever you need here */ 
 
    background: #f00; 
 
} 
 
.middle { 
 
    background-color:#ccc 
 
    }

<div class="wrapper"> 
 
    <div class="left"> 
 
    left 
 
    </div> 
 
    <div class="middle"> 
 
    center 
 
    </div> 
 
    <div class="right"> 
 
    right 
 
    </div> 
 
</div>

來源

2014-10-04 15:14:45 dippas

如何自動調整中間div寬度？

回答

相關問題