html - CSS 计算出相等的高度

Question

我有以下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;
}

Answer 1

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

添加以下 CSS：

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

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

Answer 2

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

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

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