Question

我有

<div id="1"><div id="2"></div></div>

div#1位于正文后方，宽度为100% 当我给div#2 margin:10px时，它会被推到屏幕外

如何从屏幕边缘给div#2一个恒定的填充？

Answer 1

当然，这种情况的唯一方法就是这样吗？

<div id=number1><div id=number2></div></div>

#number1 {
    width:100%
    height:100px;
    background:red;
    padding:10px;
}

#number2 {
   width:auto;
   height:100px;
   background:blue;  
}

#number1可以是您想要的任何固定宽度或百分比，#number2适合减去padding:10px #number1的{{1}}。

请参阅此小提琴http://jsfiddle.net/Udders/qFStY/

BTW：ID tokens must begin with a letter。

Answer 2

div＃1紧随身体后方，宽度为100％

然后不要给div#1宽度。如果您没有指定其宽度，它将为auto，它将完全填满屏幕。然后div#2将不再被推到屏幕边缘。

Answer 3

Div 2的宽度定义为100％。你不能给它100％的宽度和一个保证金，并期望它不会推出父div。将div 2的width属性设置为auto。

Answer 4

听起来您可能遇到Collapsing Margins

您可能希望在div 1上设置padding:10px;。

查看此jsfiddle example

的不同之处在div 1＆amp; 2,2中的

设置为10px的边距，并且折叠边距会阻止父div 1具有顶部和底部间距

在div 3＆amp; 4中，3设置为填充10px，给出我认为你正在寻找的间距

无论外部div大小如何，整个宽度div内的div如何具有恒定的余量？

4 个答案: