如何使水平的div弹性

Question

I have a set of 1-4 divs sitting vertically inside of a <section> . There are 4 buttons which decide how many divs will be invoked. I need the divs to expand to a proportional size, side by side, when they are instantiated. Here is some HTML and CSS code which relate to this.

First the HTML5 markup...

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

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

Dennis

Answer 1

Since Legacy support was required and I had trouble even with the use of a table, I improvised a non-CSS only solution. Clicking on the buttons 1-4 gives me the divisor (nDays) and I used it to divide the width of the container, which gave me the correct width for each div which houses the forecast day div.

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

Works great, without all the convolutions of trying to make CSS do it automatically.

And here is the result.

Answer 2

Edit: I missed the bit about legacy support being required, making this answer not quite appropriate.

CSS solution:

#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 */
}

There's no need to put a display: table; in the parent div but you could to make it clearer.

Need to check different browsers!

Answer 3

please try this one in css

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