0

我正在尝试创建 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社区有什么想法吗？谢谢

4

1 回答 1

2

演示

.column {
  display:inline-block
}
于 2013-11-12T21:26:26.087 回答