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 になります。マージンはこれを行いません。

それ以外の場合、実際に 30 ピクセルのパディング スペースを確保するには、寸法を変更する必要があります。

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;