0

我有一个包含可变数量的文本和固定高度的 div。如果没有固定宽度，宽度将自动为 100%。我可以估计 div 需要的宽度，但由于文本并不总是相同，这并不总是有效。每次都需要自动确定。基本上，我希望 div 的宽度由内容决定。

简单地说，我的 div 就像

#a {
height:100px;
width:?;
}

考虑这些：http: //jsfiddle.net/ZE4Sy/2/

这基本上就是我的目标（尽管我是通过估计宽度来做到这一点的）。每个 div 都有固定的高度，但文本的数量不同。在文本开始超过高度之前，我将宽度尽可能小。

我只有非常基本的 jquery/javascript 知识，但我假设如果有解决方案，它可能涉及这些。

谢谢您的帮助！

4

2 回答 2

0

这里：

$('.box').each(function () { 
    var $box = $(this),
        width = $box.width(),
        $inner = $box.wrapInner('<div></div>').children().first();

    while (width > 0 && $inner.height() < $box.height()) $box.width(--width);  
    $box.width(++width);
});

现场演示：http: //jsfiddle.net/ZE4Sy/6/

于 2013-05-31T22:29:30.687 回答
0

我有一个类似的问题，但在我的情况下，有两个因素阻止了 Šime Vidas 的解决方案工作，即我的 div 中的内容包含 HTML（带边距的 p 标签等），我希望 div 突出到如有必要，包含 div 的可用宽度。使用他的解决方案作为灵感，我想出了这个：

$('.box').each(function () { 
    $box = $(this);
    $inner = $box.wrapInner('<div></div>');
    while ($inner[0].scrollHeight > $box.height()) $box.width($box.width()+100);  
});

这只会使盒子稍微变宽，直到内部 div 的高度不超过包含的高度。您可以减少 +100 数字以获得更准确的宽度，但会花费处理时间。

于 2014-01-14T18:15:41.910 回答