Equal elements' height in rows using w3.css

问题

I've been trying to make my rows' elements' height be equal but still haven't succeeded. Do you have any ideas how to do that?

Thanks, cheers.

<div class="w3-row">
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
            <h3><i class="material-icons">person</i> name</h3>
            <p>100112</p>
    </div>
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
        <h3><i class="material-icons">person</i> name</h3>
        <p>100112</p>
    </div>
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
        <h3><i class="material-icons">person</i> name</h3>
        <p>100112</p>
    </div>
    <div class="w3-container w3-quarter w3-green text-center matrix-element">
            <h3><i class="material-icons w3-xxlarge">remove_circle_outline</i></h3>
    </div>
</div>

Example fiddle HERE

回答1:

flexbox can do that

.w3-row {
    display: flex;
}

.w3-container {
    flex:1;
}

JSfiddle Demo

回答2:

The trick is to remove the CSS class w3-xxlarge from the <i>-tag containing the circular glyph, because the line-height of that glyph using that class differs from the default line-height for the glyps or text in the other divs.

I have also added min-height: 20px; for the p-tags to compensate for no content.

JSFiddle demo

回答3:

I have had this same problem recently, and flexbox styling can work unless you need your site to be suitable for a wider range of browsers eg. IE9 and below ref: http://caniuse.com/#search=flexbox

I use a negative margin technique which would mean doing this:

.w3-quarter {
    padding-bottom: 100px;
    margin-bottom: -100px;   
}

Works on bootstrap grid rows as well!

JSFiddle

来源：https://stackoverflow.com/questions/31921089/equal-elements-height-in-rows-using-w3-css

标签

html

css

alignment

w3c

w3.css