HTML DIV和填充问题

Question

我有一个div [class =“container”]，里面是div [class =“item”]，如：

<style type="text/css">
.container{
    height:50vh;
    width: 32vw;
    text-align: center;
    color: #fff;
    /*padding: 30px;*/
    border: 1px solid rgba(0, 0, 0, 0.13);
}

.imgitem {
    height:100%; /*tried with "calc(50vh - 60px)" too*/
    width: 100%;
}
</style>
<div class="container">
    <div class="imgitem">
        <img src="flower_img.png" style="max-height:100%; max-width:100%" />
    </div>
</div>

我期待的是“容器”应该保留CSS中给出的宽度（32vw）和高度（50vh）。但是一旦我在容器中添加填充物，它的大小就会增加。

现在我想要实现的是：

1. 外部容器应具有给定的宽度和高度。
2. 容器必须填充30px。填充后容器宽度/高度不应增加。
3. 带有“imgitem”类的内部div应该具有剩余的宽度（32vw - 30px -30px），我的意思是（容器：宽度 - 容器：padding-left - container：padding-right）。同样是身高。

对于我附加图像的布局：

任何人都可以帮我解决这个问题。 我已经花了一整天的时间做这件事，但什么都没有。

[ITS特定于IE10，地铁应用程序]

由于

Answer 1

你可以使用css3 -moz-box-sizing：border-box; 属性来获得所需的结果，它不会影响你的宽度和宽度。身高......使用填充...

HTML

<div>demo demo</div>

<强> CSS

div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
    background: none repeat scroll 0 0 red;
    height: 150px;
    padding: 10px;
    width: 150px;
}

请参阅演示： - http://jsfiddle.net/qpdsZ/10/

Answer 2

我想我明白你的意思。使用边距而不是填充。那应该可以解决你的问题。它不会增加你的盒子周围的面积或尺寸。

如果您有32 x 50并添加填充，则得到62 x 80.保证金不会这样做。

否则要在填充空间中实际拥有30px，您的尺寸需要更改。

Answer 3

你也可以这样做。

.container{
 height:50px; 
width: 32px;
padding:5px;
color: green;

}

.imgitem {
height:30px; /*tried with "calc(50vh - 60px)" too*/
width: 30px;
padding: 5px;
color:red;
}
 img{
text-align: center;
   height :20px;
 width: 20px;
}

我基本上是手动设置值。如果您愿意，也可以采用这种方法。

感谢。

Answer 4

您可以使用box-sizing属性来克服这种情况。

box-sizing : border-box;