根据文本自动调整<div>的大小？</div>

Question

我有以下的JS Fiddle来展示我正在努力实现的目标： http://jsfiddle.net/sVKU8/2/

1）我假设第一部分很简单 - 有没有办法更新父label类，根据两个孩子{{1}的总宽度自动设置它width所以边框只围绕绿色和红色<div> s？我认为设置<div>应该这样做，但我的CSS技能显然缺乏。

2）接下来我要完成的工作是从我的width: auto类中删除width属性，并在每次应用文本时设置宽度（如果可能，自动增长） label-text通过JavaScript而没有文本换行（即保持<div>类的原始高度。）

我不确定是否需要尝试根据实际文本计算宽度，或者是否有办法只使用宽度设置应用文本以使其增长。

非常感谢任何意见或建议！

Answer 1

将此属性添加到您的css：

 .based-on-text{
   display: inline-block;
 }

这样，div就像一个块一样，但它将具有所需的宽度，而不是取整个父级别的宽度！

Answer 2

click here 没有使用传统floating elements方法

的额外JS的CSS替代方案

Answer 3

这个小提琴(Click HERE)显示在div inline-block上使用text-label和一个小JS来设置带有边框的外框上的宽度。

这是javascript。蛮丑的。可能有更好的方法：

$(".label").css("width", 
    parseFloat( $(".label-image").css("width")) 
    + parseFloat( $(".label-text").css("width"))
);