在这个website中,我想为带有问题的列定义一个相等的高度。
我正在使用Materialize CSS作为Framework。
这可能吗?
这是我的实际HTML:
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m6 question-one">
<div class="icon-block">
<h2 class="center light-blue-text"></h2>
<h5 class="center">How can I buy simple products fast and easy?</h5>
</div>
</div>
<div class="col s12 m6 question-two">
<div class="icon-block">
<h2 class="center light-blue-text"></i></h2>
<h5 class="center">How can I buy my ongoing demand in some minutes?</h5>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 question-three">
<div class="icon-block">
<h2 class="center light-blue-text"></h2>
<h5 class="center">How can I get mobile access to documentation / spare parts of my devices?</h5>
</div>
</div>
<div class="col s12 m6 question-four">
<div class="icon-block">
<h2 class="center light-blue-text"></h2>
<h5 class="center">How can I find the fitting product to my application?</h5>
</div>
</div>
</div>
</div>
<br><br>
这是CSS:
.question-one {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
.question-two {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
.question-three {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
.question-four {
padding: 85px 85px 85px 85px !important;
background-color: #009ee3;
}
提前致谢
最佳答案
Flexbox就是为此而生的。这就是我在MaterializeCSS上使用它的方式。
.flex {
display: flex;
flex-wrap: wrap;
}
并在父行上添加
<div class="row flex">
<div class="col"></div>
<div class="col"></div>
</div>
关于css - CSS:等高列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44846068/