CSS: equal height columns

问题

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

回答1:

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>

回答2:

Please see below. I have redefined your CSS so you can add as many questions as you want. When the class question-xxx (where xxx is anything) is used, the CSS will be applied.

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

来源：https://stackoverflow.com/questions/44846068/css-equal-height-columns

标签

css

materialize