变换（270deg）宽度和左css问题的水平手风琴

我创建一个水平的手风琴，我有宽度，左和顶部位置的问题。我想要的是h3标签可以在转换后填满手风琴的整个高度，所以我将宽度设置为100％，但是它使手风琴变得混乱，而且h3标签不是彼此相邻，而是在两者之间存在间隙每个标签。如果有人知道将我的元素设置为彼此对齐并且没有间隙，并且顶部的位置是对齐将会很好。您可以使用不同的元素，如果你想我只是用H3在这里做一个教程后我jsFiddle 变换（270deg）宽度和左css问题的水平手风琴

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

来源

2013-03-25 ONYX

你看过这个http://www.marghoobsuleman.com/jQuery-common-accordion – btevfik 2013-03-25 05:28:24

的biggist混乱通过旋转div，宽度变成高度，高度变成宽度。除此之外，还有一个选择器可用于div转角的位置（另请参阅How do you align 270deg rotated text to top left?）。

我成立了一个例子与高度=宽度 http://jsfiddle.net/SpaKe/2/ 你可以看到所有的东西制定出相当不错的现在

，如果你想使300像素高的矩形，并让我们说50像素宽，和你想要将div对齐。然后你必须引入保证金 - 右：-xxx px。然后计算高度宽度= 250px之间的差异。所以保证金 - 右：-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; 
}

所以的rember：宽度和高度在旋转时更改，您可以设置旋转div的角落。

来源

2013-03-25 09:41:34

变换（270deg）宽度和左css问题的水平手风琴

回答

相关问题