我正在制作一個簡單的網站編輯器，我需要在文本區域的右側對齊 2 個按鈕，如下所示：（
“清除”和“開始”是按鈕）。
我正在考慮使用 div 來包圍按鈕，但我已經嘗試過了，但它不起作用。
另外，我試圖避免使用絕對定位，因為在我的情況下管理起來會很痛苦。
我是 css 定位的新手，所以如果您需要進行更改，請隨時建議我如何改進。
編輯：這是我嘗試過的：
<img src = "https://picsum.photos/200/200"></img>
<button style = "display: inline-block; vertical-align: top;">test1</button>
<button style = "display: inline-block; vertical-align: top;">test2</button>
我已經嘗試過網格布局，但由于處理大小的方式，這不起作用，而且它并沒有回到最遠的地方。代碼的問題在于它們不會中斷到下一行，如果它跳到影像下方。我認為原因是因為每一行都是一個元素。對它使用 div 具有相同的結果：影像一行。
uj5u.com熱心網友回復：
從像這樣的小網格開始的一種相當直接的方法是定義網格模板區域。
每個區域都有一個名稱，您可以將其水平和垂直布置。
例如，要讓您的第一個元素占據第二個元素的兩倍垂直空間，您可以設定：
grid-template-areas:
'first second'
'first third';
（這些區域可以叫任何你喜歡的名字）
所以這里它應用于您的代碼：
.grid-container> :nth-child(1) {
grid-area: first;
}
.grid-container> :nth-child(2) {
grid-area: second;
}
.grid-container> :nth-child(3) {
grid-area: third;
}
.grid-container {
width: min(300px, 100vw);
display: grid;
grid-template-areas: 'first second' 'first third';
grid-gap: min(10px, 1vw);
}<div class="grid-container">
<img src="https://picsum.photos/200/200"></img>
<button>test1</button>
<button>test2</button>
</div>uj5u.com熱心網友回復：
Flexbox 來救援
.wrapper,
.btn-wrapper {
display: flex;
}
textarea {
border: 2px solid black;
margin-right: .1rem;
height: 100%;
}
.btn-wrapper {
flex-direction: column;
}
button {
border: 2px solid black;
background-color: white;
}<div class="wrapper">
<div>
<textarea cols="10"></textarea></div>
<div>
<div class="btn-wrapper">
<button>clear</button>
<button>go</button>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351440.html