CSS3：多个旋转的div垂直对齐

我有三个或更多的div，我想旋转并垂直对齐它们。我试过了，但我没有找到解决方案。CSS3：多个旋转的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>

我试图做这样的事情：

enter image description here

文本长度可以与文化和我改变想要保持所有的div对齐。那可能吗？我感谢任何帮助。

来源

2014-10-07 Ragnar

不要旋转单个项目...旋转整个事情。简单得多。 – 2014-10-07 14:53:53

谢谢@Paulie_D非常好的主意！ – Ragnar 2014-10-07 14:57:14

你在推翻事物。

不要旋转单个项目......像建立一个普通的水平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

来源

2014-10-07 14:59:44

这比我的代码更干净。 Upvoted这个，做得好！ – 2014-10-07 15:01:04

干杯！ – Ragnar 2014-10-07 15:07:30

+1优秀和简单的解决方案。只有一个问题，需要'.rotation'上的'display'设置吗？不知道是否需要。 – Harry 2014-10-07 15:08:52

有可能。诀窍是将旋转放在div .rotation上。我还更改了transform-origin，以便旋转从左下方开始，而不是中间开始。

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

查看fiddle的结果。这是你想要的方式吗？

来源

2014-10-07 14:59:59

CSS3：多个旋转的div垂直对齐

回答

相关问题