我有一组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自动进行所有操作。
这就是结果。