将 90 度翻转的 div 与常规水平 div 对齐

Question

是否可以将 90 度翻转div 放在正常水平旁边？

在我的示例中，我希望蓝色div("一些文本"(是垂直的，并且位于水平的"bottom-right"div旁边。 是否可以在使其响应的同时这样做？ 我不希望只翻转文本，我希望我放入该div 中的任何项目也被翻转。

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

您可以使用弹性框和writing-mode属性。这是一个工作小提琴演示。如果您想更改文本名称，您可以使用不同的东西进行writin-mode，如此处所述

更新版本：文本底部位于左侧。诀窍是将writing-mode设置为vertical-lr

.HTML：

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

.CSS：

*{
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;
}