Javascript 使Div的宽度尽可能小

小提琴：

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

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

我想将这些统计数据集中在计算器区域，但我不知道宽度，所以我使用了以下方法：

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

很酷，应该行吗？事实证明并非如此，这是因为outputStats非常贪婪，使用的宽度超过了它的需要，事实上，它实际上使用了所有剩余的可用宽度

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

编辑：这就是我想要的： 我想要这种效果，但实际上是通过设置solWrap div的宽度来实现的。因为这个计算器是动态的，所以我想要动态生成宽度

新编辑：还没有人回答正确

下面是正在发生的事情：

JavaScript正在两个div中生成内容：

Sample Variance:    12.212
Population Variace: 12.291

第1部分将包含“样本差异
大众化…”

另一个div将包含数据

它们位于计算器文本区域内，该区域的宽度为400px，并且都显示为内联块

问题是，当JavaScript在div中生成此内容时，它会相应地为“sample variance…”生成此内容。它将宽度设置为可能具有的最小值

但是，当JavaScript为数字生成div内的内容时，它将宽度设置为大于需要的宽度，并且实际上占据了计算器div内的其余区域

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

解决方案：我找到了一个解决方案。我没有使用display:inline块，而是使用display:table并将内部div设置为display:table单元格，这样就可以了。

html

<div id="solWrap" class='parentDiv'>    
 ....Child divs

试试这个：

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>

---

如果我离这儿很远，我很抱歉，但是你为什么不能用桌子呢

<table id="stats_table">
    <tbody id="stats_table_body">
        <tr>
            <td class="title">Sample Variance:</td>
            <td class="value">12.212</td>
        </tr>
        <tr>
            <td class="title">Population Variace:</td>
            <td class="value">12.291</td>
        </tr>
    </tbody>
</table>

---

这里有一个JSFIDLE:

所以你只想把内容集中在一个div中，对吗？为什么不是css？不，我想要以div为中心，而不是实际内容。所有内容都是在事件发生后生成的。是否要调整div的大小？添加了一个编辑，以使我想要的内容更清晰@user3682802的可能副本检查更新。意外地发布了其他的现场演示代码？现场演示不是我想要的行为：/这是行为，但事实上，你必须开始在填充输入不是我要找的。此外，一切都不一致。标题偏离中心。@user3682802您可以通过1）删除“左填充：21%；”对阿米尔的演示进行这些更改从#calcTextArea，2）添加“文本对齐：居中；”添加“文本对齐：左；”到CSS中的#solTitles和#solStats。但是如果你这样做，你就会失去我最初想要的行为…：/另外，请对代码进行解释，以使其更易于理解。如果试图使用JavaScript将数据插入表中，可能会产生太多问题，并且可能会显示与div相同的行为。另外，您将两列的宽度硬编码到css中，这是我不能（或不愿意）做的。@user3682802硬编码宽度来自css。如果删除所有css，因为不需要，列的宽度将取决于列中最长的值。当然，这仍然意味着使用一个表，所以它可能解决不了任何问题。是的，我知道，但我宁愿没有功能，也不愿处理插入表的问题。另外，计算器将进入WordPress博客，表格将继承我可能不想要的东西，但div不会。无论如何，谢谢你。

<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>

#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;
}

<table id="stats_table">
    <tbody id="stats_table_body">
        <tr>
            <td class="title">Sample Variance:</td>
            <td class="value">12.212</td>
        </tr>
        <tr>
            <td class="title">Population Variace:</td>
            <td class="value">12.291</td>
        </tr>
    </tbody>
</table>

var myStats = [{title: 'Sample Variance', value: 12.212},
               {title: 'Population Variace', value: 12.291}];
function makeStatsTable(stats){
    var table = document.getElementById("stats_table_body");

    stats.forEach(function(stat){
        var tr = document.createElement("tr");

        var title = document.createElement("td");
        title.className = "title";
        title.textContent = stat.title;
        tr.appendChild( title );

        var value = document.createElement("td");
        value.className = "value";
        value.textContent = stat.value;
        tr.appendChild( value );

        table.appendChild( tr );
    });
}

makeStatsTable( myStats );