CSS：等高列答案

【问题标题】：CSS: equal height columnsCSS：等高列
【发布时间】：2017-06-30 12:03:38
【问题描述】：

在这个website 中，我想为带有问题的列定义相等的高度。

我使用 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;
}

提前致谢

【问题讨论】：

标签： css materialize

【解决方案1】：

Flexbox 就是为此而生的。这就是我在 MaterializeCSS 上的处理方式。

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

并在父行上添加

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

【讨论】：

这应该被标记为正确答案。来自我的 +1。
请将此标记为正确答案。也为我工作。 +1
将其标记为对我也有效的正确答案 1++
是的，2020年路过这里。这应该是标记的正确答案！非常感谢！

【解决方案2】：

请见下文。我已经重新定义了您的 CSS，因此您可以添加任意数量的问题。当使用class question-xxx（其中xxx是任何东西）时，将应用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>

【讨论】：