html - 旋转 float div 旁边的 div

Question

我有这个布局:(也是一个 JSFiddle here )

.rotate {
  transform: rotate(270deg) translate(-10em, 0);
  transform-origin: 0 0;
  float: left;
}

.left {
  float: left;
}

<div class='rotate'>
  Rotated
</div>
<div class='left'>
  Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br>
</div>

我试图让 .rotate div 紧挨着 .left div，但我做不到。

我试过...

• 也将旋转后的 div 向左浮动(在代码片段中)，但它占据了宽度，就好像它没有旋转一样。
• 添加 position:absolute 和 left:0，但随后与内容重叠

如何让 div 与左浮动的 div 一起旋转？

Answer 1

只需更改旋转后的 div 的 transform-orgin 并从该元素中删除 translate。

.rotate {
  transform: rotate(270deg);
  transform-origin: 100% 100%;
  float:left;
}

.left {
  float: left;
}

<div class='rotate'>
  Rotated
</div>
<div class='left'>
  Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br> Some content....
  <br>
</div>