如何讓同一個div上的其他按鈕繼承更大按鈕的高度尺寸？

Question

在CSS中使用HTML。

在一個div上，我有三個按鈕，每個按鈕都有不同的class（邊框樣式），用CSS編碼。我使按鈕的行爲在寬度固定的位置，而高度根據文本長度更改大小。

我遇到的問題是，當一個按鈕更改大小（高度），其他按鈕沒有跟隨或不繼承相同的高度div也被調整。

這是我在HTML代碼：

<div class="container-1020-Apx"> 

     <button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button> 
     <button type="button" class="btn-styleCT"> middle </button> 
     <button type="button" class="btn-styleRT"> right </button> 
    </div> 

這裏是我的CSS代碼：

.container-1020-Apx { 
    margin:auto; 
    text-align: left; 
    width:1020px; 
    min-height: 30px; 
    background-color: White; 
    display:block; 
} 

.btn-styleLT{ 
    border : solid 2px #170417; 
    border-radius : 20px 0px 0px 0px ; 
    moz-border-radius : 0px 20px 0px 0px ; 
    font-size : 16px; 
    color : #f4f6f7; 
    padding : 4px 18px; 
    width: 422px; 
    background : #000000; 
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535)); 
    background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : linear-gradient(top, #000000 0%, #1f3b08 100%); 
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0); 
    min-height: 20px; 
    max-height: inherit; 
} 

.btn-styleRT{ 
    border : solid 2px #170417; 
    border-radius : 0px 20px 0px 0px ; 
    ... <almost same content> 
    min-height: 20px; 
    max-height: inherit; 
} 

.btn-styleCT{ 
    border : solid 2px #170417; 
    font-size : 16px; 
    color : #f4f6f7; 
    padding : 4px 18px; 
    width:167px; 
    background : #000000; 
    ... <almost same content> 
    min-height: 20px; 
    max-height: inherit; 
} 

.btn-styleLT:hover, 
.btn-styleLT:focus, 
.btn-styleLT:active, 
.btn-styleLT.active { 
    color: #ffffff; 
    background-color: #3276b1; 
    border-color: #285e8e; 
} 

.btn-styleRT:hover, 
    ... <same> 
    border-color: #285e8e; 
} 

.btn-styleCT:hover, 
... <same> 
    border-color: #285e8e; 
} 

任何想法？我正在考慮爲每個按鈕提供單獨的div，但如果沒有這樣做會有解決方法，那就太好了。

Answer 1

你需要使用display：table和display：table-cell來實現你想要的。

這裏有一個的jsfiddle：http://jsfiddle.net/vtajZ/293/

HTML：

<div class="parent"> 
    <div class="child"><button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button></div> 
    <div class="child"><button type="button" class="btn-styleCT"> middle </button></div> 
    <div class="child"><button type="button" class="btn-styleRT"> right </button></div> 
</div> 

CSS：

*{ 
    box-sizing:content-box; 
} 
.parent { 
    display: table; 
    position:relative; 
} 
.child { 
    display: table-cell; 
} 

.btn-styleLT{ 
    border : solid 2px #170417; 
    border-radius : 20px 0px 0px 0px ; 
    moz-border-radius : 0px 20px 0px 0px ; 
    font-size : 16px; 
    color : #f4f6f7; 
    padding : 4px 18px; 
    width: 422px; 
    background : #000000; 
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535)); 
    background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%); 
    background : linear-gradient(top, #000000 0%, #1f3b08 100%); 
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0); 
    min-height: 20px; 
    max-height: inherit; 
} 

.btn-styleRT{ 
    border : solid 2px #170417; 
    border-radius : 0px 20px 0px 0px ; 
    ... <almost same content> 
    min-height: 20px; 
    max-height: inherit; 
} 

.btn-styleCT{ 
    border : solid 2px #170417; 
    font-size : 16px; 
    color : #f4f6f7; 
    padding : 4px 18px; 
    width:167px; 
    background : #000000; 
    ... <almost same content> 
    min-height: 20px; 
    max-height: inherit; 
} 
.btn-styleCT,.btn-styleRT{ 
    height: 100%; 
} 
.btn-styleCT{ 
    position:relative; 
    height:100%; 
} 
.parent button{ 
    margin:0px; 
}