我想从相同的位置开始文本并且在一行中右对齐

Question

当前行为

我想连续对齐页面右侧的文本， 此外，文本应根据同一页面中最长的文本从同一位置开始。

当前代码

html:

<div class="row">
        <div>Titile</div>
    
        <span class="comment">
            long textelement
        </span>
    </div>

<div class="row">
    <div> Titile2</div>

    <span class="comment">
        small text
    </span>
</div>

CSS：

.row{
  width: 67%;
  display:flex;
}

.comment{
 margin-left: auto;
}

演示：demo

期待

Answer 1

一个简单的解决方法是添加一个 div 容器作为父级，这样子级就可以正确对齐

.container {
  display: flex;
  justify-content: space-between;
}

.row {
  width: 67%;
  display: flex;
  flex-direction: column;
}

<div class="container">
  <div class="row">
    <div>Titile</div>

    <span class="comment">
      long textelement
    </span>
  </div>

  <div class="row">
    <div> Titile2</div>

    <span class="comment">
      small text
    </span>
  </div>
</div>

Answer 2

您可以在右侧需要其内容的行的内容周围添加一个新 div。如果该 div 具有 width: fit-content 它将采用最大子项（最长文本）的宽度并使其看起来像您想要的结果。

.row{
  width: 67%;
  display:flex;
  flex-direction: column;
}
.move-right{
  align-items: flex-end;
}

.row-items{
  width: fit-content;
}

<div class="row">
  <div>
    Title
  </div>

  <span class="comment">
    long text element
  </span>
</div>

<div class="row move-right">
  <div class="row-items">
    <div>
      Titile2
    </div>

    <span class="comment">
      small text
    </span>
  </div>
</div>