将容器元素的宽度与子元素的宽度相匹配

Question

我想要这样的设置：

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

jsfiddle: http://jsfiddle.net/cutcopypaste/3uu5Q/

btns 和块 div 根据内容获取宽度。就像小提琴中出现的那样，除了 btns 的宽度基于它们的文本而不是它们的容器

我不能使用表格，因为我需要能够应用样式来获得截然不同的外观，所以我需要 html 标记保持基本相同。如果绝对必要的话我可以应用一些js。

我尝试了几种不同的显示方式，但不确定如何实现这一点。我不希望硬编码任何宽度，因为内容会发生变化，并且我需要它在旧版本的 IE 中工作（尽管我可以使用 IE9.js 等库）。

Answer 1

这里有一个示例，说明如何将 #block 的大小调整为与其最长按钮一样宽：

#block {
  float: left;
}  

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

浮动元素将仅扩展到其内容的宽度。假设您希望每个按钮都在自己的行上。

如果您希望按钮一起流动，请从 .btn 规则中删除 clear:both。但是，如果您确实希望将它们全部放在一行上，则必须注意浮动下降。如果所有按钮加在一起的宽度大于可用宽度，就会发生这种情况。在这种情况下，最右边的按钮将下拉到其他按钮下方。

更新：根据OP的评论，这里是表格单元格样式的CSS，其中#block和所有.btn元素扩展到最宽的按钮宽度：

#block {
  display: inline-block;
}  

.btn {
  display: block;
}

以及示例。

Answer 2

btns 和块 div 根据内容获取宽度。

我不是 100% 确定我是否理解正确，但使用 display:inline 元素，如 spans 而不是

s应该可以解决你的问题。

Answer 3

让它们浮动或内联，这样它们就不会像块一样（不会是 100% 宽度）。