html - 使列与具有嵌套框的列相同的高度

Question

我正在尝试创建 2 列，一列简单地填充文本，而另一列包含三个等高的彩色框 (33.33%)，然后加起来与文本的高度相同。不幸的是，容器的整体大小不能是固定高度，因为网站是响应式的，文本量可能会改变，所以我需要两列的高度是灵活的。

现在我使用了 display: table;并显示:表格单元格；在网站的其他地方，为了在两列之间实现相同的高度，但我正在努力使这一列与其中一列中的三个同样大小的盒子一起工作。

我制作了一个 JSFiddle 来向您展示我得到的东西: http://jsfiddle.net/56yFp/

这是 html:

<div class="column-row">

  <div class="column column-cell column-text">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  </div>

  <div class="column column-cell column-boxes">

    <div class="box green-box">Box 1</div>
    <div class="box red-box">Box 2</div>
    <div class="box blue-box">Box 3</div>

  </div>

</div>

CSS:

.page-wrapper {
  background-color: #FFFFFF;
}

/* Table */
.column-table {
  display: table;
}

.column-row {
  display: table-row;
}

.column-cell {
  display: table-cell;
}

.column {
  vertical-align: middle;
  height: 100%;
}

.column-text {
  width: 62.5%;
  background-color: #e2e2e2;
}

.column-boxes {
  width: 37.5%;
}

.box {
  min-height: 33.33%;
  width: 100%;
}

/* Colors */

.green-box {
  background-color: #016354;
}

.red-box {
  background-color: #eb5640;
}

.blue-box {
  background-color: #93ceee;
}

SO 社区有什么想法吗？谢谢

Answer 1

DEMO

.column {
  display:inline-block
}