html - 如何在单个母 block 中为不同的 block 定义不同的 "text-align"？

Question

假设我有这个代码:

<div class="mother">
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
    <br>
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
</div>

还有CSS:

.r {
    display: inline;
}
.l {
    display: inline;
}

我想要所有 .r <div> s 呈现在 .mother 的右侧和所有 .l <div> s 在左边。类似 float: right/left; 的东西

但我不想使用 float .我想用智能 text-align .

我试过了 text-align; right/left;对于 .mother但它们都将具有相同的对齐方式，全部向左或全部向右。 我怎么知道.mother你的text-align必须是 left对于 .l s 和 right对于 .r s?

Answer 1

试试这个

.mother{width:200px}
.r {
    display: table;
    text-align: right;
    width: 100%;
}
.l {
    display: table;
    text-align: left;
    width: 100%;
}

<div class="mother">
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
    <br>
    <div class="r">r
    </div>
    <br>
    <div class="l">l
    </div>
</div>