html - 当我调整浏览器大小时 CSS 布局发生变化。我只写了几周的代码，就碰壁了

Question

您好，我查看了 W3 和此处，但找不到答案。我已经实现了我想要的布局，但是当我开始调整浏览器大小时它就崩溃了。我已经编码了六个星期。为什么布局不正常？

  div {
  border: 1px solid black;
  padding: 10px;
}

#head {
  background-color: red;
  height: 150px;
  color: white;
  font-size: 50px;
  text-align: center;
}

#left {
  display: inline-block;
  width: 47%;
  height: 300px;
  overflow: auto;
}

#right {
  display: inline-block;
  width: 49%;
  height: 300px;
  float: right;
  overflow: auto;
}

#footer {
  height: 100px;
  background-color: blue;
  color: white;
  }

<div id="head"> The Daily Scumbag</div>
<div id="left">
  <h1>This is left column.
  </h1>
  Lorem Vestibulum
</div>
<div id="right">

Answer 1

嗯，你的基本想法很好，但这里有些地方不太理想。

我想您自己知道手动将一个 div 设置为 width: 47%; 而将另一个设置为 49% 并不理想。我猜你每个都想要 50%。在这种情况下，如果您想使用 float，则不需要 display:inline-block;。

更重要的是，为了更轻松地进行 css 管理，我会将 box-sizing:border-box; 添加到您的 div css 声明中。它可以防止边框和填充被添加到宽度之上，并确保您可以相应地使用 width: 50%;(在此处阅读更多信息:https://www.w3schools.com/cssref/css3_pr_box-sizing.asp)。

请在此处查看更新后的示例:

<style>
html,body{
    padding:0;
    margin:0;
}
div {
    border: 1px solid black;
    padding: 10px;
    box-sizing:border-box;
}

#head {
    background-color: red;
    height: 150px;
    color: white;
    font-size: 50px;
    text-align: center;
}
#left {
    float:left;
    width: 50%;
    height: 300px;
    overflow: auto;


}
#right {
    width: 50%;
    height: 300px;
    overflow: auto;
}
#footer {
    clear:left;
    height: 100px;
    background-color: blue;
    color: white;
}
</style>

注意:

html,body{
    padding:0;
    margin:0;
}

这会阻止浏览器使用它们的默认值，这会移除元素和浏览器窗口周围的空间。