html - CSS DIV as table - 如何使所有列的高度与最高列相同

Question

我的 DIV 表有一些问题。也许有更好的方法来解决这个问题。

我想让所有列的高度都与最高列的高度相同。有办法吗？还是有另一种方法来完成这项工作？

我必须在这里用我的代码制作一个 jsfiddle 示例:http://jsfiddle.net/rb500o4L/ (右栏高于左栏、中间栏和 Logo 栏。)

我的 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>

我很感激任何建议。

Answer 1

使用这个 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;
  }