html - 如何获得两个DIV，它们的宽度相加成100％？

我有两个DIV（导航和主要）。当它们的宽度加到100％时，第二个总是漂浮在第一个的下方。如果我将第一个DIV的宽度更改为19％，将第二个DIV的宽度更改为79％，则它们会并排浮动，但右侧会留出2％的空白。

我如何才能将2个DIV并排放置（即使在调整窗口大小之后），以便它们合并以填充100％的页面宽度？

这是代码，正在Chrome中对其进行测试：

<html>

<head>
  <title>Space</title>
  <style>
    #header h1 {
      text-align: center;
      font-size: 40pt;
      font-family: Century Gothic;
    }
    #header {
      background: aqua;
    }
    #nav {
      height: 100%;
      width: 19%;
      float: left;
      background: lightblue;
    }
    #nav p {
      font-size: 20pt;
      font-family: Century Gothic;
      color: yellow;
    }
    #main {
      float: left;
      padding-left: 20px;
      background: linear-gradient(white, blue);
      width: 79%;
      height: 100%;
    }
  </style>
</head>

<body>

  <div id="header">
    <br>
    <h1>All About Space</h1>
    <br>
  </div>



  <div id="nav">
    <p>Mercury</p>
    <p>Venus</p>
    <p>Earth</p>
    <p>Mars</p>
    <p>Saturn</p>
    <p>Jupiter</p>
    <p>Uranus</p>
    <p>Neptune</p>
  </div>



  <div id="main">
    <h3>This website is all about space</h3>
    <img src="http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg" alt="" height="200px" width="400px">
    <p>Clicking on the links to the right and you will learn all about the planets of the solar system</p>
    <p>Maybe one day we will all be able to visit some of them!</p>
  </div>

</body>

</html>

最佳答案

这里的问题是您使用的是box-sizing：content-box（默认值），因此您需要注意填充和边距计算，如果在某些时候使用的px不同的浏览器大小会破坏布局，则需要进行边距计算。我们必须为所有布局属性（例如填充，边距，边框等）使用正确的百分比值。

* {
    box-sizing: border-box;
}

#nav {
    height: 100%;
    width: 20%;
    float: left;
    background: lightblue;
}

#main {
    float: left;
    padding-left: 20px;
    background: linear-gradient(white, blue);
    width: 80%;
    height: 100%;
}

关于html - 如何获得两个DIV，它们的宽度相加成100％？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37434899/

个div

html - 如何获得两个DIV，它们的宽度相加成100％？