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垂直對齊

回答

相關問題