css - 如何实现这种对齐

Question

我了解一些基本的 CSS，但我目前正在努力实现以下 4 个元素的对齐。

我有 2 行 2 个元素。在每一行中，左边的元素左对齐，右边的元素右对齐。

MediumSizedElement1.............................ShortEL2
VerryyyyyyyyyyLongElement3...........MediumSizedElement4

我已经达到了一般位置，但最大的困难是，ShortEL2 元素喜欢与它下面的第四个元素对齐。

MediumSizedElement1..................ShortEL2...........
VerryyyyyyyyyyLongElement3...........MediumSizedElement4

请帮我实现第一张图片。

Answer 1

CSS 网格来拯救!

.grid-host {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
}

.grid-host :nth-child(even) {
  text-align: right;
}

<div class="grid-host">
  <div>MediumSizedElement1</div>
  <div>ShortEL2</div>
  <div>VerryyyyyyyyyyLongElement3</div>
  <div>MediumSizedElement4</div>
</div>