CSS 计算出相等的高度答案

【问题标题】：CSS Working out equal heightsCSS 计算出相等的高度
【发布时间】：2012-05-10 09:07:46
【问题描述】：

我有以下 html，但我对以下内容非常困惑：

.rowNumber 和 .title 在所有三个框中的高度相同
.rowNumberItems 在每列中的内容量不会相同

如何使用 CSS 使列相等，以便我的 .button div 在所有列中都相等？

我的专栏是height:200px; by width:195px;

示例列：

<div id="priceTable">
 <div class="rowOne">
  <p class="title">Name</p>
 <ul class="rowOneItems">
  <li>Custom Design</li>
 </ul>
   <div class="button"><a href="#">Buy Now</a></div>    
 </div> <!-- Column One --> 
</div>

当前 CSS：

#priceTable{
    width:780px;
    height:230px;
    margin:0 auto;
    overflow:hidden;
    background:gray;
}
.rowOne, .rowTwo, .rowThree{
    float:left;
    height:225px;
    width:195px;
    margin:0 40px 0 0;
    background:red;
}

#priceTable .title{
    font-weight:bold;
    text-align:center;
    color:#000;
}

#priceTable .button{
    background:green;
    background:url('../images/button.png') no-repeat;
}

【问题讨论】：

@BenjaminUdinktenCate 我已经放弃了我当前的 CSS
等等，你想让它做什么？
@MagicDev 我只希望 .button div 对齐且相等，而不依赖于项目 ul 中的内容

标签： html css height width

【解决方案1】：

小提琴：http://jsfiddle.net/iambriansreed/ZJhPq/

添加以下 CSS：

.rowOne, .rowTwo, .rowThree {
    position: relative;
}

#priceTable .button {
    position: absolute;
    bottom: 0;
}

【讨论】：

同时给#priceTable .button一个定义的高度和宽度。

【解决方案2】：

您能否将 .rowNumberItems 设置为特定高度并溢出：隐藏？固定 rowNumberItems 的高度后，按钮位置将相等。

.rowOneItems{height:200px;overflow:hidden;}

例如：http://jsfiddle.net/3bmrZ/

【讨论】：