使用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;
}

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