Question

我的DIV表有些问题..也许还有更好的方法可以做到这一点。

我希望所有列的高度与最高列的高度相同。有办法吗？还是有另一种方法可以使这项工作？

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

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

CSS DIV作为表 - 如何使所有列的高度与最高相同

1 个答案: