将文本旋转90°，结果div在父级中具有位置

Question

当我旋转文本（或更确切地说是包含文本的div）时，这导致div escapeing >>是父级。不仅如此，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>

当我旋转文本（或更确切地说是一个包含文本的div时，这会导致div转义其父对象。不仅如此，div的高度就是它的原始宽度。我宁愿坚持使用CSS来...

Answer 1

3
投票

这里的书写模式可能更有效。

将文本旋转90°，结果div在父级中具有位置

问题描述投票：0回答：1

1个回答

最新问题

将文本旋转90°，结果div在父级中具有位置

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1