如何左/右对齐元素，但也调整垂直高度

Question

我尝试了很多东西，比如浮动我的元素和垂直对齐，但它不起作用;基本上我试图在一个盒子里有 10 个 p 元素，一半在盒子的左侧，一半在盒子的右侧。但相反，当我到达第五个元素时，即使我添加"垂直对齐：文本顶部"，它也不会恢复到顶部。

有人知道如何对齐吗？另外，如果我将其更改为li元素怎么办？这会改变事情吗，因为我正在考虑简单地将它们放在子弹上;会更好看。

.TargetBox {
  width: 70%;
  margin: auto;
  height: 300px;
  background-color: black;
  color: #66ff33;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 40px;
}
.Explainer {
  width: 70%;
  height: 300px;
  margin: auto;
  background-color: black;
  color: #66ff33;
  text-align: center;
  border-radius: 5px;
}
.leftColumn {
  text-align: left;
  vertical-align: text-top;
}
.rightColumn {
  text-align: right;
  vertical-align: text-top;
}

<div class="TargetBox">
  <h1> Target Box </h1>
  <p class="leftColumn">one:</p>
  <p class="leftColumn">two:</p>
  <p class="leftColumn">three:</p>
  <p class="leftColumn">four:</p>
  <p class="rightColumn">five:</p>
  <p class="rightColumn">six:</p>
  <p class="rightColumn">seven:</p>
  <p class="rightColumn">eightt:</p>
  <p class="rightColumn">nine:</p>
  <p class="rightColumn">10:</p>
</div>

Answer 1

您可以使用float和clear：

.TargetBox {
  width: 70%;
  margin: auto;
  height: 300px;
  background-color: black;
  color: #66ff33;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 40px;
}
.Explainer {
  width: 70%;
  height: 300px;
  margin: auto;
  background-color: black;
  color: #66ff33;
  text-align: center;
  border-radius: 5px;
}
.leftColumn {
  text-align: left;
  vertical-align: text-top;
  float:left;
  clear:left;
}
.rightColumn {
  text-align: right;
  vertical-align: text-top;
  overflow:hidden;
}

<div class="TargetBox">
  <h1> Target Box </h1>
  <p class="leftColumn">one:</p>
  <p class="leftColumn">two:</p>
  <p class="leftColumn">three:</p>
  <p class="leftColumn">four:</p>
  <p class="rightColumn">five:</p>
  <p class="rightColumn">six:</p>
  <p class="rightColumn">seven:</p>
  <p class="rightColumn">eightt:</p>
  <p class="rightColumn">nine:</p>
  <p class="rightColumn">10:</p>
</div>