css - 调整大小自动基于文本？

Question

我有以下 JS Fiddle 来演示我要完成的工作：http: //jsfiddle.net/sVKU8/2/

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

2）我接下来想要完成的是width从我的label-text类中删除属性并设置宽度（或自动增长，如果可能的话），只要我<div>通过 JavaScript 将文本应用于该属性而不进行文本换行（即保持原始高度类label）。

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

任何意见或建议将不胜感激！

Answer 1

将此属性添加到您的 css ：

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

这样， div 将像一个块一样，但将具有它需要的宽度，而不是占用整个父级宽度！

Answer 2

单击此处floating elements使用传统方法的 CSS 替代方案，无需额外的 JS

Answer 3

这个小提琴（点击这里）显示了使用inline-blockdivtext-label和一个小 JS 来设置带边框的外框的宽度。

这是javascript。很难看。可能有更好的方法：

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