对齐 <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

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

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

例如，要使第一个元素的垂直方向 space 是后两个元素的两倍，您可以设置：

  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>

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

Aligning 2 buttons on the right side of a <textarea>

html

css

css-position