将文本旋转 90°，结果 div 的位置在 parent 内

Question

当我旋转文本（或者更确切地说 div 包含文本）时，这会导致 div escaping 是parent。不仅如此， div 的高度也是它的原始宽度。我宁愿坚持使用 CSS 来获得所需的结果，而不是依赖 javascript/jquery，即使这些工具可用，因为我正在使用 Bootstrap-4 我怎样才能确保旋转的 div 留在它的 parent 内，并使用它的 parents' width/height 因为它是 height/width 的基础，因为它旋转了 90 °？

谢谢！

.emptydropzone{
 height: 10vh;
 border: 1vh dashed #000; 
 border-radius: 1vh;
 background-color:  #CCC;
}

.taflag{
 width: 98%;
 min-height: 50px;
 margin: 10px 125px 10px 5px;
 padding: 10px 10px 10px 10px;
 border: 5px solid #90C;
 border-radius: 5px;
 background-color:  #90C;
 color: #FFF;
 font-size:xx-large;
 font-weight: bolder;
}

.rotateparent {
 position:absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 background-color: yellow; /* this is just to see the parent div in testing */
}

.agentflag{
 transform: rotate(-90deg);
 border: 5px solid #F00;
 border-radius: 5px;
 background-color:  #F00;
 color: #FFF;
 font-size:xx-large;
 font-weight: bolder;
 
 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>

<div class="container-fluid">
 <div class="row">
  <div class="col-12">
   <div class="row">
    <div class="col-2">
                  <div class="taflag"> TA </div>
    </div>
    <div class="col-10">
                 <div class="emptydropzone" id="ta" > </div>
    </div>
   </div>
   <div class="row">
    <div class="col-2">
                  <div class="rotateparent">
                       <div class="agentflag"> AGENTS </div>
                     </div>
     </div>
    <div class="col-10">

   <div class="emptydropzone" id="agent1"> </div>
   <div class="emptydropzone" id="agent2"> </div>
   <div class="emptydropzone" id="agent3"> </div>
   <div class="emptydropzone" id="agent4"> </div>
                
    </div>
   </div>
  </div>
 </div>
</div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 1

writing-mode 在这里可能更有效率。

可能更新更少 html 和更多 boostrap 类

.emptydropzone {
  min-height: 10vh;
  border: 1vh dashed #000;
  border-radius: 1vh;
  background-color: #CCC;
}

.taflag {
  width: 98%;
  min-height: 50px;
  margin: 10px 125px 10px 5px;
  padding: 10px 10px 10px 10px;
  border: 5px solid #90C;
  border-radius: 5px;
  background-color: #90C;
  color: #FFF;
  font-size: xx-large;
  font-weight: bolder;
}

.rotateparent {
  background: yellow;
  padding: 10px 0;
}

.agentflag {
  writing-mode: vertical-lr;
  transform: scale(-1, -1);
  /* untill 
  writing-mode:sideways-lr; works everywhere */
  margin: auto;
  border: 5px solid #F00;
  border-radius: 5px;
  background-color: #F00;
  color: #FFF;
  font-size: xx-large;
  font-weight: bolder;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="row">
          <div class="col-2">
            <div class="taflag"> TA </div>
          </div>
          <div class="col-10">
            <div class="emptydropzone" id="ta"> </div>
          </div>
        </div>
        <div class="row">

          <div class="col-2 d-flex rotateparent m-0">
            <div class="agentflag m-auto"> AGENTS </div>
          </div>

          <div class="col-10 d-flex flex-column justify-content-around">

            <div class="emptydropzone" id="agent1"> </div>
            <div class="emptydropzone" id="agent2"> </div>
            <div class="emptydropzone" id="agent3"> </div>
            <div class="emptydropzone" id="agent4"> </div>

          </div>
        </div>
      </div>
    </div>
  </div>



  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

将文本旋转 90°，结果 div 的位置在 parent 内

Rotate text 90° with the resulting div having position within parent

css

flexbox

css-transforms

bootstrap-4