Question

我正在尝试创建2列，其中一列只填充文本，而另一列包含三个相同高度的彩色框（33.33％），然后加起来与文本相同的高度。不幸的是，容器的整体尺寸不能是固定的高度，因为站点是响应的，并且文本的数量可能会改变，所以我需要两列的高度是灵活的。

现在我用过display：table;并显示：table-cell;在网站的其他地方，只有两列之间达到相同的高度，但我正在努力使这一个与其中一个列中的三个相同大小的盒子一起工作。

我做了一个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
}

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

1 个答案: