时间戳

首页 > 解决方案 > 如何修复多个

旋转 90 度时相互重叠

html - 如何修复多个
旋转 90 度时相互重叠

问题描述

我需要帮助旋转多个 div 并使它们不相互重叠。我的简化代码如下所示：

<div>
    <div class="rect"></div>
    <div class="rect"></div>
    <div class="rect"></div>
 </div>

造型明智：

.rect{
height:11cm !important;
width:15.2cm !important;
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-moz-transform: rotate(90deg);   /* Firefox */
-ms-transform: rotate(90deg);   /* IE 9 */
-o-transform: rotate(90deg);   /* Opera */
transform: rotate(90deg);
}

由于某种原因，这相互重叠。这也使页面的左侧部分为空。有没有办法让它们不重叠，同时刷新到页面的左上角？

标签： htmlcss

解决方案

您可以直接旋转父div，而不是旋转内部div

代码笔链接

<div class="rectwrapper">
    <div class="rect">ABCD</div>
    <div class="rect">ABCD</div>
    <div class="rect">ABCD</div>
 </div>




  .rectwrapper{

-webkit-transform: rotate(90deg); /* Safari and Chrome */
-moz-transform: rotate(90deg);   /* Firefox */
-ms-transform: rotate(90deg);   /* IE 9 */
-o-transform: rotate(90deg);   /* Opera */
transform: rotate(90deg);
  display: flex;
}

.rect {
  background: green;
  border: 2px solid brown;
  height:11cm !important;
width:15.2cm !important;

}

推荐阅读