Question

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

在我的例子中，我希望蓝色div（“some text”）是垂直的，并且在水平“bottom-right”div旁边。是否可以这样做，同时使其响应？我不想只翻转文本，我希望我放在div中的任何项目也可以翻转。

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

您可以使用flexbox和writing-mode属性。这是一个working fiddle demonstrating。如果您想要更改文字定向，可以使用writin-mode所述的不同内容here

Updated version：文字的底部在左侧。诀窍是将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;
}

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

1 个答案: