Question

我创建了一个水平手风琴，我的宽度，左侧和顶部位置都有问题。我想要的是h3标签在转换后填充手风琴的整个高度，所以我使用的宽度为100％但它弄乱了手风琴并且h3标签不是彼此相邻，之间存在间隙每个标签。如果有人知道将我的元素设置为彼此对齐并且没有间隙，并且顶部的位置是对齐的，这将是很好的。你可以使用不同的元素，如果你想在我做jsFiddle

之后我只是在做完教程后使用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;    
}

Answer 1

最大的困惑是通过旋转div，宽度变为高度，高度变为宽度。除此之外，还有一个选择器可以在div的哪个角落转动（另见How do you align 270deg rotated text to top left?）。

我设置了一个height = width的例子 http://jsfiddle.net/SpaKe/2/ 正如你所看到的，所有事情都很顺利

现在，如果你想制作一个300px高的矩形，然后说50px宽，你想要将divs彼此相邻。然后你必须引入保证金权利：-xxx px。然后计算height-width = 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应该旋转的角落。

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

1 个答案: