如何将元素对齐到垂直线

Question

我正在尝试制作一个网站，但运行遇到了问题。我需要将 div 框中的元素对齐到垂直线。如图所示（不要质疑我的画功）

这是我的代码：

<div class="main-block">
    <div class="sub-block">
        <a class="part1">(light gray block)</a>
        <a class="part2">(dark gray block)</a>
    </div>
</div>

我需要将 .part1 和 .part2 保留在 .sub-block div 中。

Answer 1

Table布局可以这样做：

.main-block {
  display:table;
}
.sub-block {
  display:table-row;
}

.sub-block > * {
  display:table-cell;
  padding:10px;
}
.part1 {
  text-align:right;
}

<div class="main-block">
    <div class="sub-block">
        <a class="part1">aaa</a>
        <a class="part2">bb</a>
    </div>
    <div class="sub-block">
        <a class="part1">a a aaaaa</a>
        <a class="part2">b</a>
    </div>
    <div class="sub-block">
        <a class="part1">aaaaaaaaaaaaa</a>
        <a class="part2">(dark gray block)</a>
    </div>
    <div class="sub-block">
        <a class="part1">a</a>
        <a class="part2">bbbbbbbbbb</a>
    </div>
</div>

如何将元素对齐到垂直线

How to align elements to vertical line

html

css

alignment

vertical-alignment

text-alignment