css - 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)，我的意思是(容器:宽度 - 容器:填充左 - 容器:填充右)。高度也是如此。

对于布局，我附上了一张图片:

谁能帮我解决这个问题。我已经花了一整天时间做这件事，但一无所获。

[它特定于 IE10，metro 应用]

谢谢

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/