只想首先感谢您阅读这篇文章。
我目前正在尝试获取有关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
最佳答案
当您要创建一个响应性的div行时，我确实建议不要使用margin，而是使用padding。至少对于左右。为什么？我会解释。
使用margin时，必须进行计算（使用css calc（））才能使其正常工作。
这是因为，如果您设置了列宽，则不包括边距，并且列实际上更宽->它不适合
当您将填充与box-sizing: border-box结合使用时，列仍会被拆分（背景除外），但列的宽度不会比您在CSS中定义的宽度宽（因为有边框）。 ->柱子确实合适，这确实使您的生活更轻松。
例：
http://jsfiddle.net/n0acjahj/