Поверните текст на 90 °, получив получившийся div в позиции parent - PullRequest
Новая
       51

Поверните текст на 90 °, получив получившийся div в позиции parent

0 голосов
/ 18 октября 2019

Когда я поворачиваю текст (или, скорее, div, содержащий текст), это приводит к тому, что div экранирует его родителя. Не только это, но высота div - это его оригинальная ширина. Я предпочел бы просто придерживаться CSS, чтобы получить желаемый результат, а не полагаться на javascript / jquery, даже если эти инструменты доступны, поскольку я использую Bootstrap-4. Как я могу убедиться, что повернутый div остается внутри своего родителя, и использую егоширина / высота родителей как основа для роста / ширины из-за поворота на 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>

enter image description here

1 Ответ

3 голосов
/ 18 октября 2019

режим письма мог бы быть намного более эффективным здесь.

возможное обновление с меньшим количеством 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>
...