设置相等的高度，以列(setting equal heights to columns)

我使用Twitter的引导框架来创建一个“文章”有两列。 文本在一侧上，并与在右侧的背景图像的一列。

HTML

<article>

 <div class='container-fluid'>

  <div class="row">

    <div class="col-md-8 indx-img" style="background-image:url('...');">
    </div>

    <div class="col-md-4 col-md-pull-8">

      <div class="text-cell">
        <h1>ttitle</h1>
        <h3>text</h3>
      </div>

    </div>

    </div><!-- /#row -->

  </div><!-- /#post -->

</article>

我希望制品具有响应的高度。 该收缩作为屏幕尺寸减小（一个或％东西）。 我需要两列具有相同的高度（背景-IMG一个需要的高度，以显示背景图像）

我现在的CSS使用填充，以产生一个响应大小的背景IMG柱（ 填充：16％0），但不影响左栏（我想在其列垂直居中文本）

我试着高度：30％; 上一篇文章，但它简化版，添加任何高度，列本身。

Answer 1:

克里斯Coyier有一个很好的解决方案了。 建议您查看此： https://css-tricks.com/fluid-width-equal-height-columns/

从文章举例：

HTML

<div id="css-table">
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></div>
  <div class="col"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
</div>

CSS

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}

文章来源: setting equal heights to columns