Align right with “writing-mode: vertical-lr” in a

问题:

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>

回答1:

I dont know it will solve your exact senario. you can use translateX proprty. if you want a generic X value calculate using calc

like transform: translateX(calc(100% - 50px)); *50px half of the size the text width

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:

I don't know if it will work, but you could try float:right, maybe in combination with text-align:right. I had some problem aligning some text myself and this helped me.

回答3:

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>

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>