时间戳

首页 > 解决方案 > 将英语句子的翻译定位在右边缘

javascript - 将英语句子的翻译定位在右边缘

问题描述

我有一个英文句子及其下方的 RTL 句子翻译：

<div class="sample-sentence">
   <p class="eng">I could make up a bed for you on the sofa.</p>
   <p class="rtl">برات آماده کنم</p>
</div>

到目前为止，我只能将 RTL 句子定位在英语句子的最左侧或中间。

如何将 RTL 句子定位在英文句子的右边缘，如下所示：

在此处输入图像描述

标签： javascripthtmlcss

解决方案

grid并且justify-content可能会有所帮助：

.sample-sentence {
  display: grid;
  justify-content: start;
}

/* snippet demo purpose */
body>p {text-align:center;background:none;}
p {margin:0;background:#bee}
<div class="sample-sentence">
  <p class="eng">I could make up a bed for you on the sofa.</p>
  <p dir="rtl">برات آماده کنم</p>
</div>
<hr>
<p>no matter the initial direction of the doc</p>
<hr>
<div dir="rtl" >
<div class="sample-sentence">
  <p>برات آماده کنم</p>
  <p dir="ltr" class="eng">I could make up a bed for you on the sofa.</p>
</div>
</div>

推荐阅读