Question

我在编写一些css时遇到了一些挑战;实际上，右边距似乎小于左边距，而两者都设置为5％！

使用Firefox 35.0.1

body {
  width: 100%;
  padding: 0;
  margin-top: 5%;
  background: #fff;
}
#main-content {
  float: left;
  width: 57%;
  background: #a7cbd3;
  margin-left: 5%;
  min-height: 777px;
}
#side {
  float: right;
  width: 33%;
  background: #0081a9;
  margin-right: 5%;
  min-height: 777px;
}

<div id="main-content">Main content</div>
<div id="side">Side</div>

我可以问你的建议吗？

提前谢谢！

Answer 1

您必须重置默认body页边距以防止内容溢出。

body {
  margin: 5% 0 0; /* added margin-top 5% as previous rule */
}

＆＃13;

body {
  width: 100%;
  padding: 0;
  margin: 5% 0 0;
  background: #fff;
  margin: 0;
}
#main-content {
  float: left;
  width: 57%;
  background: #a7cbd3;
  margin-left: 5%;
  min-height: 777px;
}
#side {
  float: right;
  width: 33%;
  background: #0081a9;
  margin-right: 5%;
  min-height: 777px;
}

＆＃13;

<html>

<head>
  <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
  <div id="main-content">Main content</div>
  <div id="side">Side</div>
</body>

</html>

＆＃13;

CSS布局百分比显示Firefox中的右边距较小

1 个答案: