如何自动增长（宽度）div

Question

我有一个div

<div id="div1">
</div>

我正在使用jquery：

将文本插入其中

$('#div1').html('abcd');

我希望这个div的宽度根据插入的文本的长度扩展调整大小。 我试过了：

   #div1
{
width:auto;
}

但它不起作用。 请帮忙。

Answer 1

我认为你想要的是inline-block。我为你做了一个JSFiddle here，它应该做你想要的。键入文本框，然后在文本框下方看到展开下方的div。

<强> HTML

<input type="text" id="input">

<div>
    <div id="out"></div>
</div>

<强>的jQuery

$("#input").keyup(function() {
    $("#out").html($(this).val());
});

Answer 2

div的默认宽度为auto，表示“父级的宽度”。

如果您需要一个根据其内容更改宽度的元素，则需要一个内联元素，如span。

唯一与其内容一起扩展的非内联HTML元素是table。如果您没有为表格指定宽度，它将随其内容一起增长。

Answer 3

检查http://jsfiddle.net/9LAg9/2/

处的工作示例

Answer 4

我的要求是相同的，也没有什么不同，也希望它在ie7 +中工作相同。

要求的宽度根据其内容而自动居中div。

查看这个工作示例。

http://jsfiddle.net/gAcjn/3/

测试IE7 IE8 IE9。

Answer 5

不要让那个可怜的小div独自留下。

就像这样放在旁边的另一个，或者你的孤独的div会扩展到窗口的宽度。此外，div宽度的默认值为auto，因此没有指定该值。

<div style="float:left; border:1px solid #fa0237;">Your inserted text</div>
<div style="float:left;"></div>

第二个div向上推动第一个div的右侧，迫使它假定其允许的最小宽度。

Answer 6

您可以使用CSS轻松地做到这一点，使用fit-content的{​​{1}}属性，如下所示：

width

这将允许#div1 { width: fit-content; } 元素自动增长。

---

P.S。 ：不需要复杂的JQuereis。让我知道这是否对您有帮助。