右揃え「書き込みモード：垂直-LR」で固定幅のコンテナ

Question

で私はコンテナのdiv（赤いボックス）の右側に貼り付けテキストの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>

Answer 1

私はそれはあなたの正確なsenarioを解決します知りません。 translateX proprtyを使用することができます。ジェネリックX値を計算するには、計算を使用して計算する

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

それが動作する場合、私は知らないが、あなたはフロート試みることができる：多分テキスト整列との組み合わせで、右：右。私はいくつかのテキストを自分自身で整列させる問題を抱えていて、これが私を助けました。

Answer 3

私は質問の一部を誤解しているかもしれませんが、あなたは垂直-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>

その他の場合、子供とディスプレイには書き込みモードを適用しません。フレックス

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>

と下の例