使用w3.css在行中相等元素的高度

Question

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

Answer 1

flexbox can do that

.w3-row {
    display: flex;
}

.w3-container {
    flex:1;
}

JSfiddle Demo

Answer 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

Answer 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