與孩子

Question

的匹配容器元素的寬度我想有這樣的設置：

<div id="block"> 
<div class="btn">2</div> 
<div class="btn">1235e</div> 
<div class="btn">really long one</div> 
</div> 

的jsfiddle：凡btns和塊DIV得到他們的寬度基於內容http://jsfiddle.net/cutcopypaste/3uu5Q/

。就像它出現在小提琴中，除了btns的寬度基於它們的文本而不是它們的容器

我不能使用表格，因爲我需要能夠應用樣式來獲得截然不同的外觀，所以我需要html標記保持基本相同。如果絕對有必要，我可以申請一些js。

我嘗試了幾種不同的顯示方式，但不知道如何實現這一點。我不希望硬編碼任何寬度，因爲內容將會改變，我需要它在舊版本的IE中工作（儘管我可以使用IE9.js這樣的庫）。

Answer 1

的＃阻止如何將尺寸爲寬是它的最長的按鈕Here's an example：

#block { 
    float: left; 
} 

.btn { 
    float: left; 
    clear: both; 
} 

的浮動元素只會擴大其內容的寬度。假設你想讓每個按鈕都在自己的行上。

如果您希望按鈕一起流動，請從.btn規則中刪除clear:both。但是，如果你確實需要將它們全部放在同一行上，則必須注意浮動下降。如果所有按鈕的寬度加在一起大於可用寬度，則會發生這種情況。在這種情況下，最右邊的按鈕將下降到其他按鈕下方。

更新：基於OP的評論，這裏有一個表單元格樣式，其中#block和所有.btn元素擴展到最寬按鈕的寬度CSS：

#block { 
    display: inline-block; 
} 

.btn { 
    display: block; 
} 

隨着an example。

Answer 2

其中btns和塊div根據內容獲取其寬度。

我不知道我是否可以得到你的權利100％，但使用display:inline元素，如span s，而不是<div> S的關係解決您的問題。

Answer 3

使他們浮動或內聯，這樣他們將不會像塊一樣行事（不會是100％寬度）。