如何使水平的div彈性

Question

我有一組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

丹尼斯

Answer 1

由於需要傳統支持，即使使用表也遇到了麻煩，所以我提出了一種非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 */
}

無需放置display: table; 在父div中，但您可以使其更清晰。

需要檢查不同的瀏覽器！

Answer 3

請在css中嘗試這個

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