web-dev-qa-db-ja.com

CSS：同じ高さの列

この中で ウェブサイト 質問のある列に等しい高さを定義したいと思います。

マテリアライズ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;
}

前もって感謝します

cssmaterialize
6
A.Casara

Flexboxはこのために生まれました。これが私がMaterializeCSSでそれにアプローチした方法です。

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

親行に追加します

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