在固定宽度的容器中与“writing-mode: vertical-lr”右对齐答案

【问题标题】：Align right with "writing-mode: vertical-lr" in a fixed width container在固定宽度的容器中与“writing-mode: vertical-lr”右对齐
【发布时间】：2018-02-26 01:33:49
【问题描述】：

我无法让 text div（绿色框）卡在 container div（红色框）的右侧。容器的宽度是固定的，使用writing-mode: vertical-lr;。我用vertical-align 和text-align 尝试了很多东西。

div.container {
    writing-mode: vertical-lr;
    border: 2px solid red;
    padding: 2px;
    width: 70px;
}
div.text {
    border: 2px solid green;
    transform: rotate(180deg);
}

<div class="container">
    <div class="text">I want to touch the right border of the container!</div>
</div>

【问题讨论】：

标签： css alignment vertical-alignment

【解决方案1】：

我不知道它会解决您的确切问题。你可以使用 translateX 属性。如果你想要一个通用的 X 值计算使用 calc

like 变换： translateX(calc(100% - 50px)); *50px 文本宽度的一半

div.container {
    writing-mode: vertical-lr;
    border: 2px solid red;
    padding: 2px;
    width: 70px;
}
div.text {
    border: 2px solid green;
    transform:translateX(36%) rotate(180deg);
}

<div class="container">
    <div class="text">I want to touch the right border of the container!</div>
</div>

【讨论】：

【解决方案2】：

我不知道它是否会起作用，但您可以尝试使用 float:right，也许可以与 text-align:right 结合使用。我自己在对齐一些文本时遇到了一些问题，这对我有帮助。

【讨论】：

【解决方案3】：

我可能误解了问题的一部分，但是如果您使用 vertical-rl ，它似乎可以满足您的要求（它使最后一行站在右侧）：

div.container {
    writing-mode: vertical-rl;
    border: 2px solid red;
    padding: 2px;
    width: 70px;
}
div.text {
    border: 2px solid green;
    transform: rotate(180deg);
}

<div class="container">
    <div class="text">I want to touch the right border of the container!</div>
</div>

否则，如何将书写模式应用于孩子和任何显示器。下面用 flex 举例

div.container {
    border: 2px solid red;
    padding: 2px;
    width: 70px;
    display:flex;
    justify-content:flex-end
}
div.text {
    writing-mode: vertical-lr;/* or vertical-rl*/
    border: 2px solid green;
    transform: rotate(180deg);
}

<div class="container">
    <div class="text">I want to touch the right border of the container!</div>
</div>

【讨论】：