左右文本对齐问题。

大概 B 那边这样对齐

width: max-content;
text-align-last: justify;

A 的文本设置 width:fit-content;text-align: left;试一下，不能解决别骂

@Yanlongli 啊理解错了，那就这样

<style>
.test {
width: 200px;
border: red 1px solid;
display: flex;
justify-content: flex-end;
}

.test2 {
border: yellow 1px solid;
width: max-content;
}
</style>
<div class="test">
<div class="test2">
<p>啊朋友你好</p>
<p>啊朋友再见吧再见</p>
<p>啊朋友</p>
</div>
</div>

你要在 B 里再用一个 div 包裹住那些文本段。

<style>
.root-container {
width: 100%;
height: 400px;
border: dashed 1px #ccc;
text-align: center;
}
.half-container {
width: 40%;
height: 100%;
display: inline-block;
vertical-align: top;
border: dashed 1px #f00;
}
#B.half-container {
text-align: right;
}
#B .inner-container {
width: fit-content;
margin-left: auto;
margin-right: 0;
text-align: left;
border: dashed 1px #00f;
}
</style>
<div class="root-container">
<div class="half-container" id="A"></div>
<div class="half-container" id="B">
<div class="inner-container">
<p>1234</p>
<p>1234567890</p>
<p>qwertyuiopasdfghjklzxcvbnm</p>
<p>1234</p>
<p>1234567890</p>
</div>
</div>
</div>

@Yanlongli 的答案是我需要的，我已经将项目改好了，再次感谢。又学会了一个新知识 ：width: max-content;

一开始我是没有 AB 这样的分离，完全是每段文本一行，后来需求改了，从每行一段文本改成每行两段文本展示，脑子就转不过来，问 ai 也一直没出现理想的效果。