如何让所有div在一行中保持相同的高度

Question

我正在使用 Bootstrap 的页面上工作，并使用它来定义此 Codepen 笔上的列： https ://codepen.io/smifaye/pen/GmeQrV

但是我似乎无法弄清楚的一件事是如何保持盒子的高度统一。我已经为这些盒子设置了一个最小高度值，但我的脑子里一片空白，不知道如何让所有的 div 一次调整大小。

 .recycling {
  background-color: white;
  border: 1px solid #CCCCCC;
  padding: 0;
  min-height: 250px;
}

我也希望按钮留在 div 的底部，但也无法弄清楚:(

任何帮助将不胜感激。

（右侧菜单区是网站设计的一部分，无法更改）

原文由 smifaye 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Flexbox 你可以在div中设置相等的高度

 .row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.recycling {
  background-color: white;
  border: 1px solid #CCCCCC;
  padding: 0;
  //min-height: 250px;
  height: 100%;
}

.button {
  min-height: 36px;
  height: auto;
  width: auto;
  padding: 0 36px 0 36px;
  border: 2px solid #00019F;
  font-size: 1em;
  color: #FFFFFF;
  background-color: #00019F;
  border-radius: 5px;
  text-decoration: none;
}

.button:hover {
  background-color: #2D389C;
  cursor: pointer;
}

.button:focus {
  border: 2px solid #FF9900;
  outline: 0;
}

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row " style="margin: 0px;">

  <div class="col-md-4">
    Menu area that can't be removed
  </div>

  <div class="col-md-8">
  <div class="row row-eq-height">
    <div class="col-sm-6 col-md-4">
      <div class="recycling">
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
        <p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
        <p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
        <p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
        <div style="padding: 0px 10px 10px; text-align: center;">
          <form action="https://environmentservices.camden.gov.uk/property"> <button class="button">Find, report, order</button> </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class=" recycling">
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
        <p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
        <ul>
          <li>Dumped rubbish</li>
          <li>Dog fouling</li>
          <li>Graffiti</li>
          <li>Other</li>
        </ul>
        <div style="padding: 0px 10px 10px; text-align: center;">
          <form action="https://environmentservices.camden.gov.uk/street"> <button class="button">Report</button> </form>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-md-4">
      <div class="recycling">
        <h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
        <ul style="padding-top: 10px;">
          <li>Frequently asked questions</li>
          <li>Communal collections</li>
          <li>Large household item collections</li>
          <li>More</li>
        </ul>
        <div style="padding: 0px 10px 10px; text-align: center;">
          <form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/"> <button class="button">View</button> </form>
        </div>
      </div>
    </div> </div>
  </div>

原文由 Manish Patel 发布，翻译遵循 CC BY-SA 3.0 许可协议