通常の水平divに90度反転されたdivの整列

Question

通常の横に90度のflip divを置くことは可能ですか？

私の例では、青いdiv（ "some text"）を縦にし、横の "bottom-right" divの隣に配置します。それはそれを反応的にしながら行うことは可能ですか？私はテキストだけを反転させたくないので、そのdivの中に入れたアイテムも反転させたい。あなたはフレキシボックスとwriting-mode属性を使用することができます

https://jsfiddle.net/duah6svr/1/

*{ 
 
    margin:0; 
 
    padding:0; 
 
    box-sizing:border-box; 
 
} 
 
.big-div{ 
 
    width:600px; 
 
    height:600px; 
 
    background:gray; 
 
} 
 
.top{ 
 
    float:right; 
 
    height:30%; 
 
    background:red; 
 
    width:80%; 
 
} 
 
.bottom{ 
 
    width:100%; 
 
    height:70%; 
 
    background:green; 
 
    float:right; 
 
} 
 
.bottom-right{ 
 
    float:left; 
 
    height:100%; 
 
    width:80%; 
 
    background:pink; 
 
} 
 
.vertical-invert{ 
 
    width:20%; 
 
    height:100%; 
 
    background:blue; 
 
}

<div class="big-div"> 
 
    <div class="top"> 
 
    
 
    </div> 
 
    <div class="bottom"> 
 
    <div class="vertical-invert">SOME TEXT</div> 
 
    <div class="bottom-right"></div> 
 
    </div> 
 
    
 
</div>

Answer 1

。ここにはworking fiddle demonstratingがあります。テキストオリエンテーションを変更する場合は、writin-modeと異なるものを使用することができます。here

Updated version：テキストの下部は左側にあります。

<div class="big-div"> 

    <div class="bottom"> 
    <div class="vertical-invert">SOME TEXT</div> 
    <div class="bottom-right"></div> 
    </div> 

</div> 

CSS：トリックはwriting-mode HTML

vertical-lrに設定することです

*{ 
    margin:0; 
    padding:0; 
    box-sizing:border-box; 
} 
.big-div{ 
    background:gray; 
} 

.bottom{ 
    width:100%; 
    height:70%; 
    display: flex; 
    flex-direction: row; 
} 
.bottom-right{ 
    width:80%; 
    background:pink; 
} 
.vertical-invert{ 
    width: 20%; 
    background:blue; 
    writing-mode: vertical-lr; 
    text-align: left; 
}