Question

小提琴：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扔给我。图书馆很好，但我更喜欢甜美的香草。

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

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

以下是发生的事情：

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

Sample Variance:    12.212
Population Variace: 12.291

Div 1将包含＆＃34;样本差异
人口......＆＃34;

另一个div将包含数据。

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

事情就是当JavaScript在div中生成这个内容时，它会对＆＃34;样本方差......＆＃34;进行正确的处理。它将宽度设置为它可以具有的最小可能值。

但是当JavaScript在div中为数字生成内容时，它会将宽度设置为大于它需要的范围，实际上占用了计算器div内部的其余区域。

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

解决方案：我找到了解决方案。而不是显示：inline-block，我使用display：table并设置内部div显示：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;
}

Answer 2

HTML

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

CSS

 .parentDiv { 
 width: 100%;
 text-align:center;


 }

.chilDiv {
width: 90%;
text-align:left;
margin-left:auto;
margin-right:auto;
}

Answer 3

如果我离开这里，我道歉但为什么你不能用桌子？

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

如果您需要通过javascript创建：

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

这是一个jsfiddle：http://jsfiddle.net/xiondark2008/8X7MZ/

使Div最小可能的宽度

3 个答案: