Question

首先，请您感谢您查看此帖子。

我目前正在尝试使用html，CSS和JavaScript获得一些经验，因此我可以尝试进入前端开发人员领域。我今天一直在研究这种自适应设计，但是已经出现了一些问题。以下是以下问题：

当重新调整屏幕大小时，我无法让正确的DIV与左侧DIV保持同一直线。在路上，我将添加媒体规则，以使手机/平板电脑用户的尺寸更具响应性。

body {
  margin: 0px;
  color: #fff;
  font: 600 14px/24px"Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
}
.container {
  width: 100%;
}
.contentcontainer {
  width: 100%;
}
#header,
#nav {
  border-radius: 23px;
}
#header h1 {
  text-align: center;
  color: white;
  padding-top: 35px;
}
#header {
  background: #2db34a;
  height: 100px;
  margin: 15px 10px 0px 10px;
}
#nav {
  background: #008e7b;
  height: 50px;
  margin: 10px 10px 0px 10px;
}
#nav h2 {
  text-align: center;
  color: white;
  padding-top: 10px;
}
#left,
#middle,
#right {
  border-radius: 23px;
}
#left {
  float: left;
  width: 22%;
  background: #7DC242;
  height: 200px;
  margin: 15px 10px 0px 10px;
}
#middle {
  float: left;
  width: 75.5%;
  background: #F68A1F;
  height: 200px;
  margin: 15px 10px 0px 10px;
}
#middle h1 {
  text-align: center;
  color: white;
  padding-top: 55px;
}
#left h1 {
  text-align: center;
  color: white;
  padding-top: 55px;
}

<body>
  <div class="container">
    <div id="header">
      <h1>Header</h1>
    </div>
    <div id="nav">
      <h2>Navigation</h2>
    </div>
  </div>
  <div class="contentcontainer">
    <div id="left">
      <h1>Left</h1>
    </div>
    <div id="middle">
      <h1>Middle</h1>
    </div>
  </div>
</body>

另外你可以看到我的代码中可能有一些重复的项目和一些不必要的项目，如果你能给我一些关于如何让我的代码变小和加载更快的提示，这也会很棒！

谢谢！ :) -Neiko Anglin

Answer 1

如果你想创建一个响应的div行，我真的会建议不使用margin，而是填充。至少对于左派和右派。为什么？我会解释一下。

当您使用保证金时，您必须进行计算（使用css calc（））以使其正常工作。这是因为，如果设置列宽，则不包括边距，并且列实际上更宽 - ＆gt; 不适合

当你使用填充box-sizing: border-box时，列仍然被分割（除了它们的背景），但是列的宽度并不比你在css中定义的宽（因为边界框）。 - ＆GT; 这些列非常合适，它确实让您的生活更轻松。

例如： http://jsfiddle.net/n0acjahj/

响应/自适应设计

1 个答案: