[英]CSS DIV as table - how to make all column same height as the highest
I have some problems with my DIV table.. maybe there is a better way to do this. 我的DIV表有一些问题。.也许有更好的方法可以做到这一点。
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 ?
还是有另一种方法可以使这项工作?
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.) 我必须在这里用我的代码制作一个jsfiddle示例: http : //jsfiddle.net/rb500o4L/ (右列高于左列,中间列和徽标列。)
My CSS code: 我的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;
}
My HTML code: 我的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. 我感谢任何建议。
use this css 使用这个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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.