html - 内联对齐标题和文本区域但填充窗口宽度

Question

一个是标题，另一个是文本区域。如果我不使用“display: inline-block”，它会将它们放在 2 个单独的行上，并且 textarea 会正确填充到窗口的宽度，并在窗口大小发生变化时调整大小。但是，我希望它们是内联的，但是当我添加“display: inline-block”时，textarea 不再填充到页面的宽度。

这是我目前拥有的代码。

<div style="display: inline-block" id="element1">
    <h4>Description</h4>
</div>
    
<div style="display: inline-block; vertical-align: text-top;" id="element2">
    <textarea rows="4" cols="50" readonly="readonly" style="width:100%">body</textarea>
</div>

这是它生成的屏幕截图。 Current Code Screenshot

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

在这里，我添加了一个具有display: flex 的包装器，并将第 2 个子项(最后一个 div)设置为 flex: 1，这使其填充剩余空间。

.wrapper {
  display: flex;
}
.wrapper div:first-child {
  font-weight: bold;
}
.wrapper div:last-child {
  flex: 1;
  padding-left: 5px;
}
.wrapper div:last-child textarea {
  width: 100%;
}

<div class="wrapper">
  <div id="element1">
    Description
  </div>
  <div id="element2">
    <textarea rows="4" readonly="readonly">body</textarea>
  </div>
</div>

如果 div 只是为了对齐它们，您可以将它们放在一起

.wrapper {
  display: flex;
}
.wrapper span {
  font-weight: bold;
}
.wrapper textarea {
  flex: 1;
  margin-left: 5px;
}

<div class="wrapper">
  <span>Description</span>
  <textarea rows="4" readonly="readonly">body</textarea>
</div>