0

水平アコーディオンを作成していますが、幅、左、および上部の位置に問題があります。私が欲しいのは、変換後にアコーディオンの高さ全体を埋める h3 タグなので、幅を 100% に使用していますが、アコーディオンを台無しにし、h3 タグが隣り合っておらず、間にギャップがあります。各タブ。誰かが私の要素を互いに隣り合わせに配置し、ギャップがなく、上部の位置が配置されていることを知っているなら、それは素晴らしいことです. 必要に応じて、さまざまな要素を使用できます。チュートリアルを実行した後、h3 を使用するだけです。

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 を導入する必要があります。次に、高さ-幅 = 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 に答える