html - 带有旋转文本的垂直对齐 div(无 CSS3)

Question

我试图让带有旋转文本的 div 很好地对齐并堆叠在垂直 div 中。但还没有喜悦，因为它们相互重叠。感觉我在这里遗漏了一些非常简单的东西:-)

<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/可以看到并运行

如有任何帮助，我们将不胜感激!

干杯/约翰

Answer 1

从 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;
}