Question

我有两个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>

Answer 1

问题在这里你正在使用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%;
}

Answer 2

这将为您提供预期的结果

#nav {
  height: 100%;
  width: 19%;
  float: left;
  background: lightblue;
}
#nav p {
  font-size: 20pt;
  font-family: Century Gothic;
  color: yellow;
}
#main {
  float: left;

  background: linear-gradient(white, blue);
  width: 81%;
  height: 100%;
}
img{
    max-width:100%;
}

删除主div的padding-left，然后制作IMG的max-width:100%

如何获得两个宽度相加100％的DIV？

2 个答案: