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

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和block div根据内容获得宽度。就像它出现在小提琴中一样，除了btns的宽度是基于它们的文本而不是它们的容器

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

我尝试了几种不同的显示方式，但不知道如何实现这一点。我不希望硬编码任何宽度，因为内容将会改变，我需要它在旧版本的IE中工作（虽然我可以使用像IE9.js这样的库）。

Answer 1

Here's an example如何将#block的大小设置为与其最长的按钮一样宽：

#block {
  float: left;
}  

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

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

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

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

#block {
  display: inline-block;
}  

.btn {
  display: block;
}

与an example一起。

Answer 2

  

btns和block div根据内容获得宽度。

我不是100％确定我是否帮助您，但使用display:inline s而不是span s等<div>元素可以解决您的问题。

Answer 3

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