我在 div 中有 9 個帶有文本的按鈕。它們都有 css，因此它們都占用了 1/9 的空間。
div {
border: 1px solid black;
height:200px;
width:200px;
padding:0px;
}
button {
width:calc(100% / 3);
height:calc(100% / 3);
border-radius:0px;
}<div>
<button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button><br><button>Hello world!</button><button>Hello world!</button><button>Hello world!</button>
</div>當它們具有相同的文本時，它們作業得非常好，并為我提供如上所示的所需結果。
div {
border: 1px solid black;
height:200px;
width:200px;
padding:0px;
}
button {
width:calc(100% / 3);
height:calc(100% / 3);
border-radius:0px;
}<div>
<button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button>
</div>當他們有不同的文字時，一切都會變得一團糟。我也嘗試使用 flexbox，但它只是讓按鈕填充了高度但包裹不正確。
我想要的是一種在矩形 div 中擁有 9 個按鈕的方法，這些按鈕始終是 div 大小的 1/9，無論它們的文本是什么。我需要的另一件事是按鈕可以縮放到 div，以防有人調整螢屏大小或者我需要 div 的大小不同。如果您的解決方案使用 JS/Jquery，那沒關系。
我不是 css 專家。我怎樣才能解決這個問題？有沒有更好的方法來做到這一點？謝謝你。
uj5u.com熱心網友回復：
這適用于display: flex和flex-wrap: wrap：
div {
border: 1px solid black;
height:200px;
width:200px;
padding:0px;
display: flex;
flex-wrap: wrap;
}
button {
width: 33.333%;
height: 33.333%;
border-radius:0px;
}<div>
<button>I am a different button!</button><button>Hello world!</button><button>Hello world!</button><br><button>I'm different too!</button><button>Hello world!</button><button>foo bar foo bar</button><br><button>Hello world!</button><button>Hello world!</button><button>So am I!</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/330677.html
標籤：javascript html css 按钮 弹性盒