如何自动增长(宽度)div

时间:2011-03-07 09:22:48

标签: jquery css

我有一个div

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

我正在使用jquery:

将文本插入其中
$('#div1').html('abcd');

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

   #div1
{
width:auto;
}

但它不起作用。 请帮忙。

6 个答案:

答案 0 :(得分:9)

我认为你想要的是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());
});

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:2)

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

处的工作示例

答案 3 :(得分:2)

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

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

查看这个工作示例。

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

测试IE7 IE8 IE9。

答案 4 :(得分:1)

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

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

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

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

答案 5 :(得分:0)

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

width

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


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