0

考虑我们有一个固定高度的 DIV。如果没有定义width，内容将扩展到 100% 的宽度。如何调整宽度以填充 DIV。当然，CSS 是不可能的，因此，我正在寻找使用 Javascript 的解决方案。

在此示例中，文本以 100% 的宽度展开，并在固定高度上留下大量空白空间。我需要通过 javascript 设置 130px 的宽度以使内容适合整个 DIV。但是如何计算宽度？

注意：此值 (130px) 是为示例文本估算的。根据 DIV 内容，javascript 需要计算适合 DIV 内容所需的宽度。

有什么方法可以估计 DIV 内容的 2D 大小吗？

CSS 实际上是为高度做的。当我们有一个固定的宽度时，它会继续填充 DIV 的高度。宽度也可以这样做吗？

澄清：如何在不知道宽度的情况下垂直填充DIV（我们有固定的高度）？

4

2 回答 2

2

如果我正确理解您的要求，您可以使用 Javascript 执行此操作。

诀窍是使用一个帮助<div>器，在该帮助器中，您可以让浏览器将内容流动到特定宽度并查看它出现的高度。如果 helper 的高度<div>大于 outer的高度<div>，调整宽度进行补偿。

同时，外部<div>有overflow: hidden所有这些流动的实验不会对您的页面布局产生不和谐的变化。

看到它在行动。

于 2012-06-20T22:43:21.410 回答
1

这是另一种方法。虽然效率较低，但它可能比我的其他答案更准确。

看这里的例子：

基本上将宽度向下循环，直到达到所需的高度

<div id="AA">
    <div id='A'>
        I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i need to be
    </div>
</div>

CSS： 

#AA {
    height: 300px;
    border: 1px solid black;
    width: 100%;
}

#A {
   display: inline;
}

剧本：

    height = $('#AA').height();
minWidth = 300;

currentWidth = $('#A').width();
currentHeight = $('#A').height();
stop = false;

if (currentWidth >= minWidth) {

    while (stop === false) {
        if (currentWidth >= minWidth) {
            newWidth = currentWidth - 1;
            $('#AA').width(newWidth);
            currentHeight = $('#A').height();
            currentWidth = $('#A').width();
            if (currentHeight < height) {
                stop = false;
            }
            else {
                stop = true;
            }
        }
        else {
            stop = true;
        }
    }
}
于 2012-06-21T00:33:05.080 回答