我想从同一个 position 开始文本，并且连续右对齐

Question

当前行为

我想将页面右侧的文本连续对齐，此外，文本应基于同一页面中最长的文本从相同的 position 开始。

当前代码

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;
}

演示：演示

期待

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>