變換（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問題的水平手風琴

回答

相關問題