元素宽度随着高度的增加而扩展

时间:2014-07-02 06:15:58

标签: css css3 position css-float

我使用CSS :在之前和:在之后使用div创建类似布局的纸张。它很好但宽度随着高度的增加而增加。我尝试过 max-width ,但无济于事。关于如何防止这种情况的任何想法。

HTML

<div class="rack"></div><!-- End Rack -->

CSS

.rack {
    width: 70%;
    height: 100%;
    background: #7FAE68;
    margin: -255px 0 100px 0;
    position: relative;
    float: left;
    left: 15%;
    z-index: 9999;
    transform:rotate(1deg);
    -ms-transform:rotate(1deg);
    -webkit-transform:rotate(1deg);
    padding-bottom:50px;
}
 .rack::before {
 content: "";
 background:  #E1BB70;
 position: absolute;
 height: 100%;
 width: 100%;
 z-index: -2;
 transform:rotate(1deg);
 -ms-transform:rotate(1deg);
 -webkit-transform:rotate(1deg);
 float: left;
 left: 0%;
}
 .rack::after {
 content: "";
 background: #E5E8EC;
 position: absolute;
 height: 100%;
 width: 100%;
 z-index: -1;
 transform:rotate(-1deg);
 -ms-transform:rotate(-1deg);
 -webkit-transform:rotate(-1deg);
 border: solid 1px #ddd;
 left: 0%;
}

高度增加之前 enter image description here

高度增加后 enter image description here

Jsfiddle link

将小提琴中的内容加倍,以见证问题。

1 个答案:

答案 0 :(得分:0)

将以下css添加到每个类:

box-sizing:border-box

这是一个小提琴:http://jsfiddle.net/npGy8/31/

希望这有帮助。