CSS:等高列 [英] CSS: equal height columns
本文介绍了CSS:等高列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在这个网站中,我想为带有问题的列定义相等的高度.>
我正在使用Materialize CSS作为框架.
这可能吗?
这是我的实际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>
In this website I would like to define an equal Height for the columns with the questions.
I am using Materialize CSS as Framework.
Is this possible?
This is my actual 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>
This is the 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;
}
Thanks in advance
解决方案
Flexbox was born for this. This is how I approached it on MaterializeCSS.
.flex {
display: flex;
flex-wrap: wrap;
}
and on the parent row add
<div class="row flex">
<div class="col"></div>
<div class="col"></div>
</div>
这篇关于CSS:等高列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文