CSS: columnas de igual altura

materialize

Question

En este sitio web me gustaría definir una Altura igual para las columnas con las preguntas.

Estoy usando Materialise CSS como Framework.

es posible?

Este es mi HTML real:

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

Este es el 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;
}

Gracias por adelantado

Answer 1

Flexbox nació para esto. Así es como lo abordé en MaterialiseCSS.

.flex {
display: flex;
flex-wrap: wrap;
}

y en la fila principal agregue

<div class="row flex">
<div class="col"></div>
<div class="col"></div>
</div>

Answer 2

Por favor ver más abajo. He redefinido su CSS para que pueda agregar tantas preguntas como desee. Cuando se usa la class question-xxx (donde xxx es cualquier cosa), se aplicará el CSS.

[class*="question-"] {
width: 100%;
height: 6em;
margin: 0;
background-color: #009ee3;
}
h2, h5 { margin: 0; }

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