HTML DIV和填充問題

我有一個div [CLASS = 「容器」]和裏面的div [CLASS = 「項目」]，如：HTML DIV和填充問題

<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）。但只要我向容器中添加填充，其大小就會增加。

現在我想實現的是：

外容器應給予的寬度和高度。
容器必須填充30px。填充後容器寬度/高度不應增加。
與類「imgitem」的內部div應該有剩餘的寬度（32vw - 30px -30px），我的意思是（容器：寬度 - 容器：填充 - 左 - 容器：填充 - 右）。高度也一樣。

對於佈局我附上圖片： layout

誰能幫我出這一點。我已經花了整整一天的時間做這件事，但什麼都沒有。

[及其特有的：IE10，地鐵應用程序]

感謝

來源

2012-06-20 mj.scintilla

請記住，相對於px或em，vw/vh調整元素相對於視口的大小。 –

您可以使用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/

來源

2012-06-20 12:28:38

我想我明白你的說法。使用餘量而不是填充。這應該解決你的問題。它不會增加箱子周圍的面積或尺寸。

如果您有32 x 50並添加填充您得到62 x 80.保證金不會這樣做。

否則，實際上在填充空間中會有30px，您的尺寸需要更改。

來源

2012-06-20 12:27:58 0123456789

你是指內部股利的保證金？ –

正確 - 我會看看上面的評論。「請記住vw/vh確定你的元素相對於視口的大小，而不是px或em。 - jeffery_the_wind 2分鐘前」 – 0123456789

試過了，但沒有奏效。不管怎樣，謝謝 –

你也可以做這樣的事情。

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

我基本上是手動設置值。如果你願意，你也可以採用這種方法。

謝謝。

來源

2012-06-20 12:40:43 vijay

HTML DIV和填充問題

回答

相關問題