我有一组1-4个div垂直坐在<section>内部。有4个按钮决定将调用多少个div。当实例化它们时,我需要将div并排扩展到成比例的大小。这是与此相关的一些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

丹尼斯

最佳答案

由于需要传统支持,即使使用表也遇到了麻烦,所以我提出了一种非CSS的解决方案。单击按钮1-4,可以得到除数(nDays),然后用它来划分容器的宽度,这可以为容纳预测日div的每个div提供正确的宽度。

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


效果很好,无需尝试使CSS自动进行所有操作。

这就是结果。

08-25 13:38
查看更多