与孩子

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％宽度）。