Question

这是一个稍微更新过的问题，已经解决了......直到IE8阻碍了。

Makes columns same height with one column having nested boxes

目标是有2列，一列只填充文字，另一列包含三个相同高度（33.33％）的彩色框，每个框内都包含一个响应图像。这些图像需要位于其父框的中心。然后将这三个框添加到与文本列相同的高度。不幸的是，容器的整体尺寸不能是固定的高度，因为站点是响应的，文本的数量可能会改变，所以我需要两列的高度是灵活的。

上一篇文章用内联显示修复了列和框高度问题，但是我忘了提到我还需要它在IE8中工作。在IE8中，包含彩色框的列似乎不想转到文本列的100％高度。现在，图像也不希望在任何浏览器中对齐中心（垂直和水平）。

我已经离开了我的尝试，因为它只是凌乱而没有取得任何成果。我想如果我向SO社区展示了一个人可能能够帮助我的骨头？非常感谢你欠任何可以提供帮助的人，这个问题让我疯了！

http://jsfiddle.net/6sKuN/

<div class="page-wrapper">

  <div class="column-table">

    <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">
            <img src="http://placehold.it/100x100&text=box+1">
        </div>

        <div class="box red-box">
            <img src="http://placehold.it/100x100&text=box+2">
        </div>

        <div class="box blue-box">
            <img src="http://placehold.it/100x100&text=box+3">
        </div>

      </div>

    </div>

  </div>

</div>

的CSS：

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

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

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

.column-cell {
  display: inline-block;
}

.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%;
}

.box img {
  max-width: 100%
}

/* Colors */

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

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

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

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

0 个答案: