垂直對齊divs與旋轉文本（沒有CSS3）

我試圖讓我的div與旋轉文本很好地對齊和堆疊在一個垂直的div。但是，因爲它們互相重疊，所以沒有喜樂。感覺就像我失去了一些東西很簡單這裏:-)垂直對齊divs與旋轉文本（沒有CSS3）

<div class="wrap"> 
    <div class="left">Flik 1</div> 
    <div class="left">Flik 2</div> 
    <div class="left">Flik 3</div> 
    <div class="left">Flik 4</div> 
</div>

CSS樣式

div.wrap{ 
    position: relative; 
    display: block; 
    text-align: center; 
} 
div.left{ 
border-right: 1px solid #189028; 
    border-top: 1px solid #189028; 
    border-left: 1px solid #189028; 
    padding-right: 4px; 
    padding-top: 2px; 
    padding-left: 4px; 
    background-color: #bbbbbb; 
    overflow: hidden; 
    position: relative;  
    float: left; 
    clear:both; 
    -moz-transform: rotate(270deg); 
    -moz-rotation-point: 0 0; 
    -webkit-transform: rotate(270deg); 
    -webkit-rotation-point: 0 0; 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    height: auto; 
    width: auto; 
} 
h1{ 
font-weight:bold; 
font-size:large; 
    vertical-align: middle; 
}

可以看出，在http://jsfiddle.net/rydmark/cGzRA/2/

運行任何幫助，將不勝感激！

乾杯 /約翰

來源

2012-11-05 Johan Rydmark

我只想指出你使用的'transform：rotate'是一個CSS3屬性。你只是使用供應商特定的前綴。見http://www.w3schools.com/cssref/css3_pr_transform.asp – PhonicUK

經過一些測試，我用[鏈接]（http://stackoverflow.com/questions/272799/vertical-rotated-text-in-html-table）作爲以http://jsfiddle.net/rydmark/TzzHy/143/爲結尾的基地。過濾器：標記僅適用於IE 7和8.在IE7-9，Chrome（最新版本）和FF（最新版本）中似乎工作正常。不知道它是否可以簡化，但至少它似乎工作！ –

從div.left類刪除clear: both;酒店，並告知top: 30px;

Demo

或者，如果你想在一條直線上的div的只是添加margin-top: 40px;

Demo 2

演示2的說明 - 可能是因爲您正在改變div，因此它會考慮正常的div高度，並且會疊加其他div，因此要將它們分開，請使用margin-top: 40px;或更少或更多。

CSS演示1個

div.left{ 
    border-right: 1px solid #189028; 
    border-top: 1px solid #189028; 
    border-left: 1px solid #189028; 
    padding-right: 4px; 
    padding-top: 2px; 
    padding-left: 4px; 
    background-color: #bbbbbb; 
    overflow: hidden; 
    position: relative;  
    float: left; 
    -moz-transform: rotate(270deg); 
    -moz-rotation-point: 0 0; 
    -webkit-transform: rotate(270deg); 
    -webkit-rotation-point: 0 0; 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    height: auto; 
    top: 30px; <-------- Add this 
    width: auto; 
}

CSS演示2

div.left{ 
    border-right: 1px solid #189028; 
    border-top: 1px solid #189028; 
    border-left: 1px solid #189028; 
    padding-right: 4px; 
    padding-top: 2px; 
    padding-left: 4px; 
    background-color: #bbbbbb; 
    overflow: hidden; 
    position: relative;  
    float: left; 
    clear: both; 
    -moz-transform: rotate(270deg); 
    -moz-rotation-point: 0 0; 
    -webkit-transform: rotate(270deg); 
    -webkit-rotation-point: 0 0; 
    -o-transform: rotate(270deg); 
    -ms-transform: rotate(270deg); 
    height: auto; 
    margin-top: 40px; <------- Add this here 
    width: auto; 
}

來源

2012-11-05 15:23:07

只要我有固定長度的文本或標籤本身的固定大小，就可以正常工作。當長度從6到20個字符變化時，會將較長的標籤向右推。由於@ eh9在下面寫道，渲染的順序是瘋狂的！ –

@JohanRydmark這就是我所說的，如果你傾斜，firefox將不會使用div的高度，高度將會是相同的，你需要給出分隔dem的餘量;） –

用於旋轉變換的佈局只是非常破碎。理智的行爲將是變形元素的默認佈局將在其邊界框內，然而變形，但事實並非如此。我能夠使佈局合理化的唯一方法是根據情況確定尺寸和/或定位。如果您離開您的網絡調試器（例如Firebug）並深入瞭解盒子的位置，您會發現它們正在應用之前的大小。 IMO完全瘋了，但你去了。

來源

2012-11-05 15:37:27 eh9

垂直對齊divs與旋轉文本（沒有CSS3）

回答

相關問題