0

我正在创建一个水平手风琴，但宽度、左侧和顶部位置有问题。我想要的是 h3 标签在转换后填充手风琴的整个高度，所以我使用宽度为 100%，但它弄乱了手风琴，并且 h3 标签彼此不相邻，两者之间存在间隙每个选项卡。如果有人知道将我的元素设置为彼此相邻并且没有间隙并且顶部的位置是对齐的，那就太好了。如果你希望我在完成教程后只使用 h3，你可以使用不同的元素这里是我的jsFiddle

html:

<div class="accordian" data-type="horizontal">
<h3 id="special_offers">Special Offers</h3>
<div></div>
<h3 id="new_products">New Products</h3>
<div></div>
<h3 id="reduced_to_clear">Reduced To Clear</h3>
<div></div>
<h3 id="coming_soon">Coming Soon</h3>
<div></div>

CSS：

accordian {
height:300px;
}
.accordian h3, .accordian div {
display:block; float:left;  position:relative
}
.accordian h3 {
padding:6px
}
.accordian h3{
-webkit-transform:rotate(-270deg);
-moz-transform:rotate(-270deg);
-ms-transform:rotate(-270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordian #special_offers {
background:#C90;
}
.accordian #new_products {
background:#C60;    
}
.accordian #reduced_to_clear {
background:#C30;    
}
.accordian #coming_soon {
background:#C00;    
}
4

1 回答 1

0

最大的困惑是，通过旋转 div，宽度变为高度，高度变为宽度。除此之外，还有一个选择器可用于 div 应该转动的角（另请参阅如何将 270 度旋转的文本对齐到左上角？）。

我设置了一个高度 = 宽度 http://jsfiddle.net/SpaKe/2/的示例， 因为您可以看到所有事情都很好

现在，如果您想制作一个高 300 像素、宽 50 像素的矩形，并且您希望将 div 彼此相邻对齐。然后你必须引入 margin-right: -xxx px 。然后计算 height-width = 250px 之间的差异。所以margin-right:-250px; 应该做的伎俩。

再举一个例子： http: //jsfiddle.net/SpaKe/5/ 正如我们在这里看到的，它适用于大多数浏览器（目前我无法测试 IE 行为）

.accordian h3{
width:300px;
    height:50px;
    margin-right:-250px;
    float:left;
    position:relative;

    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: left bottom;
    -moz-transform: rotate(-270deg);
    -moz-transform-origin: left bottom;
    -ms-transform: rotate(-270deg);
    -ms-transform-origin: left bottom;
    -o-transform: rotate(-270deg);
    -o-transform-origin: left bottom;
    transform: rotate(-270deg);
    transform-origin: left bottom;
}

所以请记住：旋转时改变宽度和高度，您可以设置 div 应该旋转的角。

于 2013-03-25T09:41:34.230 回答