Question

我无法将文本div （绿色框）卡在容器div （红色框）的右侧。容器的宽度是固定的，并使用writing-mode: vertical-lr;。我使用vertical-align和text-align尝试了许多内容。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我不知道它会解决你的确切情况。你可以使用translateX proprty。如果你想要使用calc

计算通用X值

like transform：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>

Answer 2

我不知道它是否会起作用，但你可以尝试浮动：对，可能与text-align：right结合使用。我自己调整了一些文本时遇到了一些问题，这对我很有帮助。

Answer 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>

与＆＃34;写作模式对齐：vertical-lr＆＃34;在固定宽度的容器中

3 个答案: