0

私は次のhtmlを持っていますが、次のことについて非常に混乱しています:

  • .rowNumberと.titleは、3 つのボックスすべてで同じ高さになります。
  • 各.rowNumberItems列のコンテンツの量は同じではありません

my がすべての列で等しくなるように、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;
}
4

2 に答える 2

1

フィドル: http://jsfiddle.net/iambriansreed/ZJhPq/

次の CSS を追加します。

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

#priceTable .button {
    position: absolute;
    bottom: 0;
}
于 2012-05-10T00:57:07.117 に答える
0

.rowNumberItems を特定の高さとオーバーフロー: 非表示に設定できますか? rowNumberItems の高さが固定されると、ボタンの位置は等しくなります。

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

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

于 2012-05-10T01:02:19.743 に答える