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/

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;