如何讓兩個HTML元素佔用每個寬度的50％，並且三個佔用33％？

我有欲每個佔用相同的寬度，並組合以佔用其包含分區的整個寬度三個按鈕。有時其中一個按鈕將被隱藏，我希望其他兩個按鈕仍然佔據其容器的整個寬度，並且每個按鈕的寬度都相同。如何讓兩個HTML元素佔用每個寬度的50％，並且三個佔用33％？

我可能運行一些JavaScript，當第三個按鈕顯示和隱藏時，它會在50％和33.3％之間來回改變它們的寬度，但我寧願在純CSS中做它。

我怎樣才能樣式這些按鈕（和它們的容器），使他們總是佔用寬度的100％，且分別爲相同的寬度，不管他們怎麼少多少或可見？

我有什麼至今：

<div class="btn-group" style="width: 100%;"> 
    <button class="btn btn-lg btn-default" type="button" onclick="fail();" style="width: 33.3%;">FAIL</button> 
    <button class="btn btn-lg btn-default" type="button" onclick="retry();" style="width: 33.3%;">RETRY</button> 
    <button class="btn btn-lg btn-primary" type="button" onclick="pass();" style="width: 33.3%;">PASS</button> 
</div>

來源

2017-05-24 Martin Carney

使用'顯示：flex'用'柔性成長：1' –

設置flex和使用對孩子flex-grow: 1; flex-basis: 0;（或flex: 1 0 0;的簡稱），使他們始終佔據所有父的空間的均勻。

$('#button').on('click',function() { 
 
    $('#foo').toggleClass('hide'); 
 
})

.flex { 
 
    display: flex; 
 
} 
 
.flex > button { 
 
    flex: 1 0 0; 
 
    background: #eee; 
 
} 
 

 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">click</button> 
 

 
<div class="btn-group flex" style="width: 100%;"> 
 
    <button class="btn btn-lg btn-default" type="button" onclick="fail();" style="width: 33.3%;" id="foo">FAIL</button> 
 
    <button class="btn btn-lg btn-default" type="button" onclick="retry();" style="width: 33.3%;">RETRY</button> 
 
    <button class="btn btn-lg btn-primary" type="button" onclick="pass();" style="width: 33.3%;">PASS</button> 
 
</div>

來源

2017-05-24 21:33:59

Flexbox的是這些東西很有幫助。只需將一個display:flex添加到父容器，並將一個flex-grow:1添加到按鈕。

.btn-group { 
 
    display:flex; 
 
} 
 
button { 
 
    flex-grow:1; 
 
}

<div class="btn-group"> 
 
    <button>1</button> 
 
    <button>2</button> 
 
    <button>3</button> 
 
</div>

父

來源

2017-05-24 21:32:18

如何讓兩個HTML元素佔用每個寬度的50％，並且三個佔用33％？

回答

相關問題