CSS DIV作为表 - 如何使所有列的高度相同的最高 [英] CSS DIV as table - how to make all column same height as the highest

问题描述

我有一些问题，我的DIV表..也许有一个更好的方法来做到这一点。

I have some problems with my DIV table.. maybe there is a better way to do this.

我想让所有列与最高列的高度相同。有办法吗？

I want to have all columns to be the same height as the highest column. Is there a way to do it? or is there another way to make this work ?

我必须使用我的代码做一个jsfiddle示例： http://jsfiddle.net/rb500o4L/ （右栏高于左侧，中间和徽标列。）

I have to made a jsfiddle example here with my code: http://jsfiddle.net/rb500o4L/ (right column is higher than left, middle and the logo column.)

我的CSS代码：

div.round-border {
border: solid 1px;
border-color: #002F67;
border-radius: 10px;
}  

#container {
display: table;
width: 100%;
}

#row  {
display: table-row;
}

#cell {
display: table-cell;
}

#cell-logo {
display: table-cell;
width: 200px;
}

我的HTML代码：

<div id="container">
<div id="row">

<div id="cell">
    <div class="round-border">
        <h4>Left Col</h4>
        <p>...</p>
    </div>
</div>

<div id="cell">
    <div class="round-border">      
        <h4>Middle Col</h4>
        <p>...</p>
    </div>  
</div>

<div id="cell">
    <div class="round-border">      
        <h4>Right Col</h4>
        <p>...</p>
        <p>...</p>
    </div>
</div>

<div id="cell-logo">
    <div class="round-border">
        <h4>LOGO AREA</h4>
        <p>...</p>
    </div>
</div>

</div>
</div>

我感谢任何建议，谢谢。

I appreciate any recommendation, thank you

推荐答案

使用此css

div.round-border {
border: solid 1px;
border-color: #002F67;
border-radius: 10px;
  }  

 container {

width: 100%;
}

 row  {

height:auto;


 }

  #cell 

 {
height:auto;
min-height:400px;
width:50px;
  display:inline-block;

  }

 #cell-logo {

  width: 50px;
  }

这篇关于CSS DIV作为表 - 如何使所有列的高度相同的最高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！