Question

我有以下HTML，我对以下内容感到非常困惑：

.rowNumber＆amp; .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/

CSS制定平等的高度

2 个答案: