将其与“写入模式：vertical-lr”右对齐。在固定宽度的容器中

问题描述

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

I can't get the text div (green box) stuck on the right of the container div (red box). The width of the container is fixed and writing-mode: vertical-lr; is used. I tried many things with vertical-align and 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>

推荐答案

我可能误解了一部分问题，但是如果您使用vertical-rl，那似乎可以您要查找的内容（它使最后一行位于右侧）：

I might have misunderstood a part of the question, but if you use vertical-rl , it seems to do what you look for (it makes last line stand on the right side):

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

else, what about to apply writing-mode to the child and any display. example below with 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>

这篇关于将其与“写入模式：vertical-lr”右对齐。在固定宽度的容器中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！