Question

我一直试图让我的行和＃39;元素＆＃39;身高相等但仍然没有成功。你有什么想法怎么做吗？

谢谢，欢呼。

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

示例小提琴HERE

Answer 1

flexbox可以做到

.w3-row {
    display: flex;
}

.w3-container {
    flex:1;
}

JSfiddle Demo

Answer 2

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

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

<强> JSFiddle demo

Answer 3

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

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

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

也适用于引导网格行！

JSFiddle

平等元素＆＃39;使用w3.css的行高

3 个答案: