第二列的高度

Question

我有以下内容

<section>
  <div class="container-fluid">
     <div class="row">
       <div class="col-lg-6 blue-background">
         <p>More text in this column</p>
         <p>More text in this column</p>
       </div>
       <div class="col-lg-6 grey-background">
       </div>
     </div>
  </div>
</section>

.blue-background列中的内容高于灰色背景列。如何使它们均匀着色？

Answer 1

使用Flexbox。

.parent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

片段

*{
  box-sizing: border-box;
}
.display-flex {
  display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

[class*="col-"] {
  padding: 15px;
  float: left;
}
.col-lg-6{
  width: 50%;
}
.blue-background {
  background: blue;
}
.grey-background {
  background: grey;
}

<section>
  <div class="container-fluid">
     <div class="row display-flex">
       <div class="col-lg-6 blue-background">
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic atque sint quae. Magnam, sint laudantium quis cum a perspiciatis dolorem, illum natus minima aliquid eligendi doloremque neque cumque esse. Omnis.sum dolor sit amet, consectetur adipisicing elit. Hic atque sint quae. Magnam, sint laudantium quis cum a perspiciatis dolorem, illum natus minima aliquid eligendi doloremque neque cumque esse. Omnis.
       </div>
       <div class="col-lg-6 grey-background">
         illum natus minima aliquid eligendi doloremque neque cumque esse. Omnis.
       </div>
     </div>
  </div>
</section>