如果有可用空间，请朝相反方向推动元件

问题描述

我正在使用CSS Grid Layout编写表单，并尝试将输入对齐到同一级别。字段将带有名称和错误的标签，并且每个字段都可以不包含任何一个或两个。

当前，我有这个：

想要这样：

因此，如果上下有可用空间，则应沿相反方向推动元素，以使字段始终对齐。

这是表单标记的CSS：

grid-template-columns: repeat(2,1fr);
    grid-column-gap: 16px;

    & > :nth-child(3),& > :nth-child(4),& > :nth-child(7) {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    & > * {
        overflow: hidden;
    }

谢谢！

编辑：

这里是HTML的基本组成部分（使用React，因此我只放置了重要的标签）：

form {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-column-gap: 16px;
}

form > :nth-child(3),form > :nth-child(4),form > :nth-child(7) {
  grid-column-start: 1;
  grid-column-end: 3;
}

& > * {
    overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
}

.label {
  margin-bottom: 4px;
}

.error {
  margin-top: 4px;
}

<form>
    <div class="content"> <!-- Each form's child is a div which contains labels and input -->
        <span class="label">Label</span> <!-- Span rendered only if exists -->
        <input />
        <!-- Span not rendered when there is no value -->
    </div>
    <div class="content"> <!-- Each form's child is a div which contains labels and input -->
      <!-- Span not rendered if no label value exists -->
      <input />
      <span class="error">Error</span> <!-- Span rendered if exists -->
  </div>
</form>

解决方法

如何将跨度（标签或错误）的高度设置为固定，除非它可以为多行

form {
  grid-template-columns: repeat(2,1fr);
  grid-gap: 16px;
  display: grid;
}

form > :nth-child(3),form > :nth-child(4),form > :nth-child(7) {
  grid-column-start: 1;
  grid-column-end: 3;
}

form > * {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

form > div > span {
  height: 20px;
}

<form>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span>Label</span> <!-- Label if exists -->
    <input />
    <span></span> <!-- Error if exists -->
</div>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span></span> <!-- Label if exists -->
    <input />
    <span>Error</span> <!-- Error if exists -->
</div>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span>Label</span> <!-- Label if exists -->
    <input />
    <span></span> <!-- Error if exists -->
</div>
<div> <!-- Each form's child is a div which contains labels and input -->
    <span>Label</span> <!-- Label if exists -->
    <input />
    <span></span> <!-- Error if exists -->
</div>
</form>

,

由于您已经在使用内容div来包装标签，并且标签已经包含display: flex，因此您只需在输入字段中添加margin-top: auto并显示错误消息position: absolute并将其放在下面输入。这样，输入将始终位于div的底部，错误范围将始终显示在div之下。

请确保在输入行之间留出一些额外的空间以显示错误。

form {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-column-gap: 16px;
}

form> :nth-child(3),form> :nth-child(4),form> :nth-child(7) {
  grid-column-start: 1;
  grid-column-end: 3;
}

&>* {
  overflow: hidden;
}

.content {
  display: flex;
  flex-direction: column;
  position: relative;
}

.label {
  margin-bottom: 4px;
}

.error {
  margin-top: 4px;
  position: absolute;
  top: 100%;
}

input {
  margin-top: auto
}

<form>
  <div class="content">
    <!-- Each form's child is a div which contains labels and input -->
    <span class="label">Label</span>
    <!-- Span rendered only if exists -->
    <input />
    <!-- Span not rendered when there is no value -->
  </div>
  <div class="content">
    <!-- Each form's child is a div which contains labels and input -->
    <!-- Span not rendered if no label value exists -->
    <input />
    <span class="error">Error</span>
    <!-- Span rendered if exists -->
  </div>
</form>