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

从clear: both;课程中删除div.left媒体资源，并提供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;
}

Answer 2

旋转变换的布局非常破碎。理智的行为是转换元素的默认布局将在其边界框内，无论如何转换，但事实并非如此。我能够让布局变得清晰的唯一方法是根据需要使用明确的大小和/或定位。如果你拿出你的网络调试器（例如Firebug）并深入了解盒子定位，你会发现它们的大小是，然后应用了变换。国际海事组织完全是疯了，但你去了。

带有旋转文本的垂直对齐div（无CSS3）

2 个答案: