Question

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

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

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

我已经达到了一般职位，但最大的困难是，ShortEL2项目喜欢使其自身与其下方的第4个元素对齐。

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>

Answer 2

最明显的答案是float和text-align的组合，尽管具体答案可能取决于您的实际情况。一种选择是将每个元素放入类似div的块类型标签中，并应用两种不同的样式。所以，你会有类似的东西。

HTML

<div class="left">MediumSizedElement1</div>
<div class="right">ShortEL2</div>
<div class="left">VerryyyyyyyyyyLongElement3</div>
<div class="right">MediumSizedElement4</div>

CSS

.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}

浮点数将使div移到父元素的左侧和右侧，而text-align s将使文本移到{{1}的左侧和右侧} s（如果您对它们应用了宽度，则可能需要-在您的示例中，看起来您可能会将右侧的两个元素设置为相同的宽度，因此文本在右对齐的情况下左对齐块，在文本右侧留出多余的空间。

Answer 3

有两种简单的实现方法：

使用table布局

table {
  width: 100%;
}
tr>td:nth-child(2) {
  text-align: right;
}

<table>
  <tr>
    <td>MediumSizedElement1</td>
    <td>ShortEL2</td>
  </tr>
  <tr>
    <td>erryyyyyyyyyyLongElement3</td>
    <td>MediumSizedElement4</td>
  </tr>
</table>

使用flexbox

.container {
  display: flex;
  justify-content: space-between;
}
div,p {
  margin: 0;
}

<div>
  <div class="container">
    <p>MediumSizedElement1</p>
    <p>ShortEL2</p>
  </div>
  <div class="container">
      <p>VerryyyyyyyyyyLongElement3</p>
      <p>MediumSizedElement4</p>
    </div>
</div>

希望有帮助！

如何做到这一点

3 个答案: