使用w3.css的行中元素的高度相等 [英] 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?

谢谢，欢呼。

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

示例小提琴这里

推荐答案

flexbox can做到这一点

.w3-row {
    display: flex;
}

.w3-container {
    flex:1;
}

JSfiddle Demo

这篇关于使用w3.css的行中元素的高度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！