html - CSS3 : Multiple rotated divs vertically aligned

Question

我有三个或更多的 div，我想旋转并垂直对齐它们。我试过了，但没有找到解决方案。

CSS:

.rotation {
  float: left;
  clear: both;
  width:100px;
}
.rotation .container {
  float: left;
  clear: both;
}
.rotation .rotate {
  float: left;
  margin-top: 20px;
  -ms-transform: rotate(90deg);
  /*IE 9*/
  -webkit-transform: rotate(90deg);
  /*Chrome, Safari, Opera*/
  transform: rotate(90deg);
  transform-origin: 50% 50% 0;
  background: #3c8d37;
  color: #fff;
  font-family:arial;
}

HTML:

<div class="rotation">
  <div class="container">
    <div class="rotate">First Text</div>
  </div>
  <div class="container">
    <div class="rotate">Long Text Long Text</div>
  </div>
  <div class="container">
    <div class="rotate">Very Long Text Very Long Text</div>
  </div>
</div>

我正在尝试做这样的事情:

文本长度可能因文化而异，我想保持所有 div 对齐。那可能吗？感谢您的帮助。

Answer 1

你想多了。

不要旋转单个元素...像构建普通水平 div 一样构建它，然后旋转父级。它还简化了标记

HTML

<div class="rotation">
    <div class="rotate">First Text</div>
    <div class="rotate">Long Text Long Text</div>
    <div class="rotate">Very Long Text Very Long Text</div>
</div>

CSS

.rotation {
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: bottom left;
}

.rotation .rotate {
    background: #3c8d37;
    color: #fff;
    font-family:arial;
    display: inline-block;
    padding:5px;

JSfiddle Demo