Question

我有几个高度为 3em 的标签。我想将文本与每个标签的底部对齐，这样带有一行文本的标签会将文本显示在标签的底部，而带有两行的标签会将第二行显示在标签底部。

对于上下文，我在 Bootstrap 行中有几列，每一列都包含一个标签和一个文本区域。一些标签的文本比其他标签长，这导致当页面宽度变小时它们会占用两行文本。我还将每个标签的高度设置为 3em，以防止 textareas 出现在不同的高度。但是，我希望较短标签的文本与较长标签的底行对齐（无论较长标签当前是否占据一排或两行）。

示例：

            <div class="row bottom-row">
                <div class="col-lg-3 col-md-6 textarea-div">
                    <label for="textArea1" class="titleLabel textareaLabel">Short</label>
                    <textarea id="textArea1"></textarea>

                </div>
                <div class="col-lg-3 col-md-6 textarea-div">
                    <label for="textArea2" class="titleLabel textareaLabel">Short</label>
                    <textarea id="textArea2"></textarea>
                </div>

                <div class="col-lg-3 col-md-6 textarea-div">
                    <label for="textArea3" class="titleLabel textareaLabel">A longer label</label>
                    <textarea id="textArea3"></textarea>
                </div>

                <div class="col-lg-3 col-md-6 textarea-div">
                    <label for="textArea4" class="titleLabel textareaLabel">A longer label</label>
                    <textarea id="textArea4"></textarea>

                </div>
            </div>

Answer 1

您可以通过将文本放在跨度中并使用 flex 将跨度与需要显示的标签底部对齐来实现：flex。最简单的方法是在具有 display: flex 的标签中的跨度上 margin-top:auto，或使用 justify-content: flex-end 强制跨度到标签的底部。

编辑：根据反馈删除跨度。谢谢

.row {
  margin: 0 -15px
}

.col-lg-3 {
  width: 25%;
  float: left;
  padding: 0 15px;
  margin-bottom: 15px
}

.titleLabel {
  height: 3em;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

<div class="row bottom-row">
      <div class="col-lg-3 col-md-6 textarea-div">
          <label for="textArea1" class="titleLabel textareaLabel">A short one line label</label>
          <textarea id="textArea1"></textarea>

      </div>

      <div class="col-lg-3 col-md-6 textarea-div">
          <label for="textArea3" class="titleLabel textareaLabel">A longer label with at least two lines</label>
          <textarea id="textArea3"></textarea>
      </div>

      <div class="col-lg-3 col-md-6 textarea-div">
          <label for="textArea4" class="titleLabel textareaLabel">A longer label with enough text to run over three lines and will be very long</label>
          <textarea id="textArea4"></textarea>
      </div>
  </div>

将文本与标签底部对齐

1 个答案: