2

我试图让我的 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/查看和运行

任何帮助将非常感激！

干杯/约翰

4

2 回答 2

4

从您的班级中删除clear: both;财产div.left并给予top: 30px;

演示

或者，如果您想将所有 div 放在一行中，只需添加margin-top: 40px;

演示 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-05T15:23:07.197 回答
2

旋转变换的布局非常糟糕。理智的行为是转换元素的默认布局将在其边界框内，无论转换如何，但事实并非如此。我曾经能够使布局保持理智的唯一方法是酌情使用明确的大小和/或定位。如果你拿出你的 web 调试器（例如 Firebug）并深入研究盒子的定位，你会发现它们在应用转换之前已经按照它们的大小进行了布局。IMO 这完全是疯了，但你去了。

于 2012-11-05T15:37:27.623 回答