使两列的高度相同，无论内容如何 [英] Make two columns the same height regardless of content

问题描述

我有一个基本的网格系统，真正的基本，它把细胞并排在一个流动的行。我想让两个单元格总是匹配他们的高度，所以他们是平等的。因此，如果一个内容比另一个内容多，则另一个扩展以匹配具有更多内容的单元格的高度。

  div class =row> 
< div class =cell1> 
< div class =inner> 
< h2>单元格1< / h2> 
< p>无论内容是什么，我可以将单元格1和单元格2设置为相同的高度，以便边框是水平的吗？< / p> 
< / div> 
< / div> 
< div class =cell2> 
< div class =inner> 
< h2>单元格2< / h2> 
< / div> 
< / div> 
< / div> 
  

演示这里的问题： http://jsfiddle.net/QDBff/

解决方案

如果您绝对必须避免使用TABLE，您可以将您的div风格设置为与

相同的表格

  display：table; 
 display：table-row; 
 display：table-cell; 
  

你可以看看markup / css，结果是这个小提琴：http://jsfiddle.net/aeinbu/QDBff/35/

I have a basic grid system, really basic, which puts to 'cells' side by side in a fluid 'row'. I want the two cells to always match their height so they are equal. So if one has more content than the other, the other expands to match the height of the cell with more content.

<div class="row">
    <div class="cell1">
        <div class="inner">
            <h2>Cell 1</h2>
            <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
        </div>
    </div>
    <div class="cell2">
        <div class="inner">
            <h2>Cell 2</h2>
        </div>
    </div>
</div>

Demo of the problem here: http://jsfiddle.net/QDBff/

解决方案

If you absolutly must avoid using TABLEs, you can style your divs to behave like tables with

display: table;
display: table-row;
display: table-cell;

You can look at the markup/css and results in this fiddle: http://jsfiddle.net/aeinbu/QDBff/35/

这篇关于使两列的高度相同，无论内容如何的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！