html - 匹配空 div 的高度(相邻)

Question

我正在使用 Bootstrap 框架并使用 2 列网格。

html

<div class="col-sm-6">
   <?php the_content(); ?>
</div>

<div class="col-sm-6" style="background-image:url('...">
</div>

内容有标题、链接、副标题和文本。这增加了该列的高度。我希望它旁边的列与其高度匹配(以便图像显示)没有设置高度图像不显示

Answer 1

拥有自己的 css，如下所示，并将其与 row 类一起添加，

HTML

<div class="row row-eq-height">
   <div class="col-sm-6">
      <?php the_content(); ?>
   </div>

   <div class="col-sm-6" style="background-image:url('...">
   </div>
</div>


/*
 * Row with equal height columns
 * --------------------------------------------------
 */
.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

引用:http://getbootstrap.com.vn/examples/equal-height-columns/