对齐 <textarea> 右侧的 2 个按钮

Question

我正在制作一个简单的网站编辑器，我需要对齐文本区域右侧的 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 具有相同的结果：图像为一行。

Answer 1

从像这样的小网格开始的一种相当简单的方法是定义网格模板区域。

每个区域都有一个名称，您可以将其水平和垂直布置。

例如，要让你的第一个元素占据第二个元素的两倍垂直空间，你可以设置：

  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>

Answer 2

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>