0

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

Bill Ruppert
  • 8,956
  • 7
  • 27
  • 44
Bertie92
  • 697
  • 1
  • 9
  • 17

3 Answers3

2

flexbox can do that

.w3-row {
    display: flex;
}

.w3-container {
    flex:1;
}

JSfiddle Demo

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

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

klaar
  • 601
  • 6
  • 17
0

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

Ben Kammerling
  • 11
  • 1