2

我有div width:200px; height:200px这个 div 应该是永久大小，但不是。我想放在 div img 里面，我可以根据用户的配置使用填充 10px 或 20px 每边进行播放。img 大小大于 200px，确实如此。我的问题是，当我使用填充时，div 的大小不会根据填充永久改变。我想用 div 的大小分隔填充。感谢您的帮助。

我的代码：

<!DOCTYPE html>
<html>
<head>

  <style type='text/css'>
    img{
width:180px;
height:180px;
margin:20px;        
}

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    hieght:200px;
}

</style>
</head>
<body>
<div class="container">
    <img src="http://gfx.glittergraphicsnow.com/albums/ll149/glittergn/flower/flower002.gif" >
</div>
</body>
</html>

这是演示链接：

4

2 回答 2

4

如果要padding在元素的宽度中包含 ，则需要box-sizing:border-box;在该元素上使用。

正如@bski 在评论和@AshwinSingh 的回答中提到的那样——您还应该使用它overflow: hidden来隐藏任何溢出的内容。

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    height:200px;
    /* add this */
    overflow: hidden;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
    box-sizing:border-box;
}
于 2012-07-01T11:36:28.883 回答
1

正常的行为是，即使您给它一个固定大小， div 也会占用其内部内容的大小。如果内部内容的总大小大于 div 的大小，则 div 将自动调整大小以容纳内容。记住，div 是一个容器，它包含东西。

我建议使用width:100%and height:100%，使其调整到足以容纳内容的大小，包括所有边距和填充。

如果您想停止该行为并使用固定宽度而不是赋予overflow:hidden属性，这将隐藏任何溢出 div 的内容。如果你想要一个滚动条而不是给overflow:scroll属性，这将在内容溢出时显示一个滚动条。

更新正如罗杰金指出的那样，你height:200px拼错了hieght:200px

于 2012-07-01T11:09:15.673 回答