0

好吧，这就是我想要做的。假设我有以下 HTML：

<div id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

以及以下 CSS：

#test {
    height: 100px;
    min-width: 100px;
}

现在，让我们假设上面 HTML 中的段落可以是可变长度的。或者也许有两段。这并不重要。我正在寻找的是一种 CSS 或 jQuery 方法来div始终保持 100 像素高，并且最终宽度不小于 100 像素，但不超过防止垂直溢出所需的宽度。

因此，如果内容足够短（例如，一个单词），div它将具有 100 像素的高度和 100 像素的宽度。如果内容是一个完整的段落，div则仍然有 100 像素的高度，内容将垂直填充它，并且div水平扩展仅足以防止溢出。

4

2 回答 2

0

您可以尝试以下方法：

#test{
    display: inline-block;
    height: 100px;
    min-width: 100px;
    max-width: 100%;
    overflow: auto;
}
于 2012-10-24T18:53:34.577 回答
0

使用while循环计算内部段落的高度，并不断调整父 div 的宽度，直到适合为止。

while ($('#test > p').height() > $('#test').height()) {
    $('#test').width($('#test').width() + 1); // or +5 or +10 for a faster result
}

http://jsfiddle.net/mblase75/MFHah/

警告：在某些情况下，这可能会导致无限循环。

于 2012-10-24T18:54:00.953 回答