元素宽度随着高度的增加而扩展 [英] Element width expands as height increases

问题描述

我使用CSS ：之前和：之后创建了具有div的纸张布局。它很好，但宽度随着高度的增加而增加。我尝试过最大宽度，但无效。

 < 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：rotation（-1deg）; 
 border：solid 1px #ddd; 
 left：0％; 
} 
  

提高身高前

高度增加后
>

Jsfiddle链接

解决方案

向每个类添加以下css：

  box-sizing：border-box 
  

$ b b

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

希望这有助。

I used CSS :before and :after to create a paper like layout with a div. It's fine but the width increases as the height increases. I've tried max-width but to no avail. Any ideas on how this can be prevented.

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

Before height increase

After height increase

Jsfiddle link

Double the content in the fiddle to witness the problem.

解决方案

Add the following css to every class:

box-sizing:border-box

here is a fiddle: http://jsfiddle.net/npGy8/31/

Hope this helps.

这篇关于元素宽度随着高度的增加而扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！