Question

我正在添加几个div来使父div中的最后一个div显示在父div的右侧但旋转了90度。但是我的内容被推出了div。下面是目前的代码：

 <div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
   <div style="transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
                        TESTING NOW
                    </div>
                </div>
            </div>

Answer 1

问题是你的内部div比外部div大，并且越过边缘。然后当您旋转内部div时，默认情况下它会围绕其中心旋转，因此顶部的文本会向右旋转。

您可以更改相对尺寸和位置以进行补偿。或者，您可以应用transform-origin告诉浏览器左右旋转（例如）左上角：

＆＃13;

<div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
    <div style="transform-origin: 0 0 0; transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
      TESTING NOW
    </div>
  </div>
</div>

＆＃13;

或者（根据您的评论中的要求）您可以使用display: flex; align-items: flex-end将文本与div的底部对齐（请注意，在此示例中div仍然会溢出，这可能是也可能不是问题，具体取决于其余的CSS）。

＆＃13;

<div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
    <div style="display: flex; align-items: flex-end; transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
      TESTING NOW
    </div>
  </div>
</div>

＆＃13;

Answer 2

不要在父DIV中使用float: right;，这会在旋转时将最里面的DIV推出

相反，为最外面的父DIV指定一个100％的宽度，在旋转的前面添加一个DIV元素并指定你想要的左侧元素的宽度，并在最里面的

中使用float：right

编辑：

这些代码应该做你想要的......你可以乱用宽度来得到你想要的东西：

<div style="width:100%;  margin: 0; padding: 0;  ">
<div style="width:90%;  margin-right: 5px; padding: 0;  ">
</div>
<div style="float: right;transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">TESTING NOW
</div>
</div>

Answer 3

试试这个：

<div style="float: right; margin: 0; padding: 0;  ">
  <div style="width: 60px;">
     <div style="font-size: 8px; transform: rotate(90deg); margin-top: 26px;">
        TESTING NOW 
     </div>
  </div>
</div>

其中＆＃34; margin-top＆＃34;最里面的=（父的宽度 - 字体大小）/ 2

Answer 4

我使用了转换起源，我发布了我的答案，它可以帮助其他人寻找它

 <div style="width:20px;height: 100%; float: left; margin: 0; padding: 0; background-color: lightgrey; ">
            <div style="margin: 5px 5px 5px 0;">
                <div style="transform: rotate(-90deg); font-size: 9px; width: 70px ; height: 55px;text-space: 5px; ">
                    Testing Testing
                </div>
            </div>
        </div>

html转换与div旋转90度

4 个答案: