如何使一组水平的div弹性

Question

我有一组1-4个div垂直坐在<section>内。有4个按钮决定调用多少个div。当实例化时，我需要divs并排扩展到比例大小。这是一些与此相关的HTML和CSS代码。

首先是HTML5标记......

<section id="main">
  <div id="resultContainer">
    <section id="i0" class="wDay">
        <h2>
            <span class="day" ></span>
            <span class="temp" ></span>
        </h2>
        <img src="">
        <span class="wDescript" style="color:#2050ff;word-break:break-all;"></span> 
        <span class="wind" ></span><br/> 
        <span class="humid" ></span> 
        <span class="other1" ></span> 
        <span class="other2" ></span> 
    </section>
    <section id="i1" class="wDay">
        <h2>
            <span class="day"></span>
            <span class="temp"> </span>
        </h2>
        <img src="">
        <span class="wDescript" style="color:#2050ff;word-break:break-all;"></span> 
        <span class="wind" ></span><br/> 
        <span class="humid"></span> 
        <span class="other1"></span> 
        <span class="other2"></span> 
    </section>
    <section id="i2" class="wDay">
        <h2>
            <span class="day" ></span>
            <span class="temp" </span>
        </h2>
        <img src="">
        <span class="wDescript" style="color:#2050ff;word-break:break-all;"></span> 
        <span class="wind"></span><br/>  
        <span class="humid"></span> 
        <span class="other1"></span> 
        <span class="other2"></span> 
    </section>
    <section id="i3" class="wDay">
        <h2>
            <span class="day"></span>
            <span class="temp"></span>
        </h2>
        <img src="">
        <span class="wDescript" style="color:#2050ff;word-break:break-all;"></span> 
        <span class="wind"></span><br/>  
        <span class="humid"></span> 
        <span class="other1"></span> 
        <span class="other2"></span> 
    </section>
  </div>
</section>

CSS：

#main {
filter: none;
position: relative;
top: 20px;
height: 400px;
-webkit-background-color: rgba(72, 72, 72, 0.2);
background-color: rgba(72, 72, 72, 0.2);
/*background-color: #484848;*/
width: 460px;
margin: 0 auto;
-webkit-border-radius: 5px;
-webkit-border: 1px solid #a1a1a1;
border-radius: 5px;
border: 1px solid #a1a1a1;
}

TIA

丹尼斯

Answer 1

由于需要Legacy支持，即使使用表格我也遇到了麻烦，因此我即兴创作了一个非CSS的解决方案。点击按钮1-4给出了除数（nDays），我用它来划分容器的宽度，这给了我正确的宽度，每个div包含预测日div。

                dayWidth = parseInt(420/nDays);
                $('#i'+i).css('width',dayWidth);
                $('#i'+i).css('display','inline-block');

效果很好，没有尝试让CSS自动完成的所有卷积。

这是结果。

Answer 2

编辑：我忽略了所需的传统支持，使得这个答案不太合适。

CSS解决方案：

#resultContainer{
    table-layout: fixed; /* Stops cell widths varying depending on content */
}

.wDay{
    display:table-cell;  /* Display as table cell. */
    width: 1%;           /* Needs some width to start with */
    text-align: center;  /* centres cell content and balances "table" margins */
}

没有必要在父div中添加display: table;，但你可以让它更清晰。

需要检查不同的浏览器！

Answer 3

请在css中尝试这个

.wDay{
    float: left;
    margin: 5px;
}