javascript - 使 Div 的宽度尽可能小

Question

fiddle :http://jsfiddle.net/GosuWhite/sXgAY/

您输入由任意字符分隔的数字，它会计算一些汇总统计数据。摘要统计信息输出在此 div 中为计算器指定的区域:

<div id="solWrap">
    <div id="solTitles"></div>
    <div id="solStats"></div>
</div>

所以你基本上会有这样的东西:

Sample Variance:    12.212
Population Variace: 12.291

我想基本上将这些统计数据集中在计算器区域，但我不知道宽度，所以我使用了这个:

solWrap.offsetWidth = outputTitles.offsetWidth + outputStats.offsetWidth + "px";

很好，应该可以了吧？事实证明它没有，那是因为 outputStats 非常贪婪并且使用了比它需要的更多的宽度，事实上，它实际上使用了所有剩余的可用宽度。

我能做什么？不要向我扔 Jquery。图书馆很好，但我更喜欢甜甜的 Vanilla 。

编辑:这就是我想要的:http://i.imgur.com/l6l4XD5.jpg 我想要那种效果，但这是通过实际设置 solWrap div 的宽度来实现的。由于此计算器是动态的，因此我希望动态生成宽度。

新编辑:还没有人回答正确。

事情是这样的:

JavaScript 在两个 div 中生成内容:

Sample Variance:    12.212
Population Variace: 12.291

Div 1 将包含“Sample Variance
Populati...”

另一个 div 将包含数据。

这些位于宽度为 400px 的计算器文本区域内，并且都显示为内联 block 。

问题是，当 JavaScript 在 div 中生成此内容时，它会根据“样本方差...”正确地执行此操作。它将宽度设置为其可能具有的最小值。

但是当 JavaScript 在 div 中生成数字内容时，它设置的宽度比需要的大很多，实际上占据了计算器 div 中的剩余区域。

如何强制包含数字的 div 尽可能小？]

解决方案:我找到了解决方案。我没有使用 display: inline-block，而是使用了 display: table 并将内部 div 设置为 display:table cell 并且它起作用了。

Answer 1

试试这个:

Live demo

html

<form id="calcForm">
    <div id="outercalcTextArea">
        <div id="calcTextArea" contenteditable="true">

        </div>
    </div>
    <div id="calcButton"><center><button id="submit" type="submit">Submit</button></center></div>
</form>

CSS

#outercalcTextArea{
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #C9C9C9; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset, -5px -5px 0 0 #F5F5F6, 5px 5px 0 0 #F5F5F6, 5px 0 0 0 #F5F5F6, 0 5px 0 0 #F5F5F6, 5px -5px 0 0 #F5F5F6, -5px 5px 0 0 #F5F5F6; 
    border-radius: 2px 2px 2px 2px;
    min-width: 400px;
    width:auto;
    font-size:12px;
    height:200px;

    white-space:nowrap;

}

#calcTextArea { 
    width:100%;
    height:100%;
    padding: 8px;
    padding-left:21%;
    box-sizing:border-box;
}