Question

所以我目前正在为我的一个朋友制作一个网站，我将左右边距设置为80px。除了我的主体，这适用于所有事情。它似乎扩展到了正确的边距，并且只有60px而不是80px的边距。

以下是截图：http://i.imgur.com/XtRdlUv.png

编辑：我切断了一些左边距，抱歉是混乱

如红色箭头所示，当他们不应该时，似乎有一个偏移。

这是我的代码：

＆＃13;

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  margin-left: 80px;
  margin-right: 100px;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  width: 100%;
  outline: #293135 solid;
  background-color: #444444;
  margin-top: 40px;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
}

＆＃13;

<div class="mainbody" style="text-align: center">
  <font face="Arial, Helvetica, sans" size="4">
    <h1 style="text-decoration: underline">Download</h1>
    <p>Features Include:</p>
  </font>
</div>

＆＃13;

Answer 1

您不需要

width: 100%;

由于.mainbody是一个块元素，它将展开以填充所有剩余空间。

否则，由于内容框大小调整模型，添加它会产生问题。

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
  margin-left: 80px;
  margin-right: 100px;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  outline: #293135 solid;
  background-color: #444444;
  margin-top: 40px;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
  text-align: center;
  font-family: Arial, Helvetica, sans;
  font-size: 18px;  
}

<div class="mainbody" style="">
  <h1 style="text-decoration: underline">Download</h1>
  <p>Features Include:</p>
</div>

Answer 2

可能是因为您的.mainbody元素使用默认的content-box，这会在100％宽度的顶部添加额外的20px左右填充。因此，元素的最终计算宽度将是 100％+ 40px ，这会导致它“溢出”各种类型。

要解决此问题，只需声明box-sizing: border-box，即：

.mainbody {
    box-sizing: border-box;
    width: 100%;
    outline: #293135 solid;
    background-color: #444444;
    margin-top: 40px;
    text-align: left;
    padding: 20px;
    color: #FFFFFF;
}

事实上，建议您使用此规则：* { box-sizing: border-box;}为recommended here。

Answer 3

我认为你正在使用古老的方法。试试这个！ .mainbody {width：calc（100％ - 120px）; } 这是你的新css和JSFiddle链接！ http://jsfiddle.net/Leo4v9rc/

body {
  background: url(image) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  text-align: center;
}
.wrapper {
  padding-top: 10px;
  text-align: left;
  margin: 0px auto;
}
.mainbody {
  width: calc(100% - 120px);
  outline: #293135 solid;
  background-color: #444444;
  margin:40px auto 0 auto;
  text-align: left;
  padding: 20px;
  color: #FFFFFF;
}

html - Div对齐问题

3 个答案: