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

Question

我一直在尝试使我的行的元素的高度相等，但仍然没有成功。你知道怎么做吗？

谢谢，干杯。

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

例子fiddleHERE

Answer 1

flexbox可以做到

.w3-row {
    display: flex;
}

.w3-container {
    flex:1;
}

JSfiddle Demo

Answer 2

诀窍是从包含圆形字形的 <i> 标签中删除 CSS class w3-xxlarge，因为该字形的行高使用class 与其他 div 中 glyps 或文本的默认行高不同。

我还为 p 标签添加了 min-height: 20px; 以补偿没有内容。

JSFiddle demo

Answer 3

我最近遇到了同样的问题，flexbox 样式可以工作，除非您需要您的网站适合更广泛的浏览器，例如。 IE9及以下参考： http://caniuse.com/#search=flexbox

我使用负边距技术，这意味着这样做：

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

也适用于 bootstrap 网格行！

JSFiddle

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

Equal elements' height in rows using w3.css

html

css

alignment

w3c

w3.css