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

【问题标题】：Resize <div> automatically based on text?根据文本自动调整 <div> 的大小？
【发布时间】：2013-04-09 11:23:32
【问题描述】：

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

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

2) 我接下来要完成的是从我的label-text 类中删除width 属性，并在我将文本应用于<div> 时设置宽度（或自动增长，如果可能的话）通过没有文字环绕的 JavaScript（即保持 label 类的原始高度）。

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

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

【问题讨论】：

【解决方案1】：

将此属性添加到您的 css 中：

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

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

【讨论】：

但这在 IE7 或更早版本中不起作用。我正在尝试制作一个完全兼容的插件，以防您想知道。有解决办法吗？
可能使用“float:left;” CSS的属性，我猜有一个clearfix。有点hacky，但在大多数情况下效果很好。您必须在父元素上应用 clearfix -> css-tricks.com/snippets/css/clear-fix

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

click here 使用传统 floating elements 方法的 CSS 替代方案，无需额外的 JS

【讨论】：