垂直对齐的Divs与旋转的文本(无CSS3)

Question

我试图用旋转的文本很好地对齐并堆叠在垂直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/

上看到并运行

任何帮助将不胜感激！

欢呼/johan

Answer 1

从您的 div.left类中删除 clear: both;属性并给予 top: 30px;

演示

，或者如果要在一行中获得所有DIV，则只需添加margin-top: 40px;

演示2

Demo 2的解释 - 可能是因为您正在转换，因此DIV的粘性是因为您确实考虑了正常的DIV高度，而不是堆叠另一个Div，因此可以将它们分开，使用margin-top: 40px;或更小。/p>

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

Answer 2

旋转转换的布局非常损坏。理智的行为将是转换元素的默认布局将在其边界框中，但是转换的范围是如此，但事实并非如此。我曾经能够理解布局的唯一方法是适当的尺寸和/或定位。如果您拿出Web调试器（例如Firebug）并挖掘出盒子定位，您会发现它们在应用之前用大小铺设了它们。IMO完全疯了，但是您去了。