使列具有相同高度，一列具有嵌套框 [英] Makes columns same height with one column having nested boxes

问题描述

我正在尝试创建2列，其中一列仅填充文本，另一列包含三个高度相同（33.33％）的彩色框，然后合并到文本的相同高度。容器的整体大小不能是一个固定的高度，不幸的是，由于网站的响应和文本的数量可能会改变，所以我需要两列的高度灵活。

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

我制作了一个JSFiddle向您展示我所得到的结果：
http://jsfiddle.net/56yFp/

这里是html：

 < div class =列行> 
 
< div class =column column-cell column-text> 
 
 
 Lorem ipsum dolor sit amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。请将您的评论发送给我们，我们会尽快为您解答。 Duis aute irure dolor in renhenderit 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>方框1< / div> 
< div class =box red-box> Box 2< / div> 
< div class =box blue-box> Box 3< / div> 
 
< / div> 
 
< / div> 
  

css：

  .page-wrapper {
背景颜色：#FFFFFF ; 
} 
 
 / *表* / 
 .column-table {
 display：table; 
} 
 
 .column-row {
 display：table-row; 
} 
 
 .column-cell {
 display：table-cell; 
} 
 
 .column {
 vertical-align：middle; 
身高：100％; 
} 
 
 .column-text {
 width：62.5％; 
 background-color：＃e2e2e2; 
} 
 
 .column-boxes {
 width：37.5％; 
} 
 
 .box {
最小高度：33.33％; 
宽度：100％; 
} 
 
 / *颜色* / 
 
 .green-box {
 background-color：＃016354; 
} 
 
 .red-box {
 background-color：＃eb5640; 
} 
 
 .blue-box {
 background-color：＃93ceee; 
} 
  

任何想法SO社区？谢谢

解决方案

DEMO

  .column {
 display： inline-block 
} 
  

I'm trying to create 2 columns, one simply filled with text while the other contains three coloured boxes of equal height (33.33%) which then add up to the same height as the text. The overall size of the container can't be a fixed height unfortunately as the site is responsive and the amount of text may change so I need the height of the two columns to be flexible.

Now I've used display: table; and display: table-cell; elsewhere in the site to achieve equal height between just two columns but am struggling to make this one work with the three equally sized boxes within one of the columns.

I've made a JSFiddle to show you what I've got: http://jsfiddle.net/56yFp/

And here's the 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;
}

Any thoughts SO community? Thanks

解决方案

DEMO

.column {
  display:inline-block
}

这篇关于使列具有相同高度，一列具有嵌套框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！