使列具有相同高度，一列具有嵌套框

本文介绍了使列具有相同高度，一列具有嵌套框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

我制作了一个JSFiddle向您展示我所得到的结果： jsfiddle/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: jsfiddle/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 }