Question

我遇到了一个有趣的CSS挑战。在下面的代码中，我能够垂直对齐文本和输入。我无法管理的部分是，在不破坏垂直对齐方式（文本-输入）的情况下，我需要在输入下放置页脚文本。

.container {
  width: 300px;
}
.head {
  display: inline-block;
  vertical-align: middle;
  width: 20%;
}
.col {
  display: inline-block;
  vertical-align: middle;
}
.col input {
  width: 100px;
}

<div class="container">
  <div class="head">
    Text
  </div>
  <div class="col">
    <input type="text" />
  </div>
  <div class="col">
    <input type="text" />
  </div>
  <div class="head"></div>
  <div class="col">
    Footer Text
  </div>
</div>
<div class="container">
  <div class="head">
    Three Line Text
  </div>
  <div class="col">
    <input type="text" />
  </div>
  <div class="col">
    <input type="text" />
  </div>
  <div class="head"></div>
  <div class="col">
    Footer Text
  </div>
</div>

此外，容器div的高度也应受页脚文本的影响。因此，在这种情况下使用绝对值将不起作用。

我已经知道一些JavaScript或CSS hack解决方案。但是对于这种情况，我想采取适当的方法。我们如何才能正确地做到这一点？

更新

我忘了提。页脚文本也可以是多行。它应该覆盖下面的两个输入。

Answer 1

Flexbox可以做到这一点，但它需要重组HTML并更改一两个类……哦，还有一个伪元素。

.container {
  width: 300px;
  display: flex;
  margin: 1em;
  border: 1px solid red;
}

.head {
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col,
.second {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 .25em;
}

input {
  width: 100px;
}

.col:before {
  content: "";
  height: 1.2em; /* or whatever your line-height is */
}

<div class="container">
  <div class="head">
    Text
  </div>
  <div class="col">
    <input type="text" />
    <div class="foot">
      Footer Text
    </div>
  </div>
  <div class="second">
    <input type="text" />
  </div>

</div>

<div class="container">
  <div class="head">
    Three Line Text
  </div>
  <div class="col">
    <input type="text" />
    <div class="foot">
      Footer Text
    </div>
  </div>
  <div class="second">
    <input type="text" />
  </div>

</div>

在不破坏垂直对齐的情况下放置另一个div

1 个答案: