如何修复彼此不相邻的div

Question

我想在导航栏下将2个div并排放置。但是，左div似乎有一个不可见的部分，迫使我的介绍标题正确地位于其预期位置。我无法弄清楚如何删除此不可见的部分。如您所知，我刚刚开始学习html，因此感谢您的指导。帮助非常感谢！

.topnav {
  background-color: #F2C369;
  overflow: hidden;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: red;
  color: white;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.div-container {
  display: inline-block;
  box-sizing: border-box;
  background-color: greenyellow;
  width: 70%;
  position: relative;
  left: 15%;
}

.left-div {
  background-color: lightyellow;
  width: 20%;
  display: inline-block;
  box-sizing: border-box;
  float: left;
  border: 1px solid black;
}

.right-div {
  background-color: lightyellow;
  position: relative;
  left: 20%;
  width: 77%;
  padding: 10px;
  border: 1px solid black;
  margin-left: 10px;
}

.introduction {
  border: 1px solid black;
  max-width: 100%;
  padding: 10px;
}

<div class="topnav">
  <a class="active" href="index.html">Home</a>
  <a href="all-articles.html">All articles</a>
  <a href="gallery.html">Gallery</a>
  <a href="contact.html">Contact</a>
  <a href="#about">About</a>
</div>

<div class="div-container">

  <div class="left-div">

    <p>Links</p>
    <p>Links go here</p>

  </div>

  <div class="right-div">

    <div class="introduction">

      <h2>Introduction to webpage</h2>

      <p>Lorem ipsum dolor sit amet, ex animal incorrupte
        vel, fuisset fierent ut eam, per semper corrumpit
        adversarium ut. Accumsan adversarium mei ei. Has
        ne veniam inermis dissentias, id sed nibh
        legendos. Vix vivendo scriptorem definitionem ut.
        Cum delenit inimicus et, vis homero libris
        nostrud cu. Sed ei utamur honestatis interesset,
        eu utroque ancillae has. Usu ea habeo iusto,
        rebum cetero elaboraret duo ei. Sea oratio dicant
        dissentiet cu.orem ipsum dolor sit amet, ex
        animal incorrupte vel, fuisset fierent ut eam,
        per semper corrumpit adversarium ut. Accumsan
        adversarium mei ei. Has ne veniam inermis
        dissentias, id sed nibh legendos. Vix vivendo
        scriptorem definitionem ut.
      </p>

    </div>


  </div>

</div>

Answer 1

使用绝对定位，使用百分比进行拆分。

尝试下面的代码段。

.topnav {
  background-color: #F2C369;
  overflow: hidden;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.topnav a {
  float: left;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: red;
  color: white;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.div-container {
  display: inline-block;
  box-sizing: border-box;
  background-color: greenyellow;
  width: 70%;
  position: relative;
  left: 15%;
  border: 1px solid red;
  clear: both;
}

.left-div {
  background-color: lightyellow;
  width: 20%;
  float: left;
  border: 1px solid black;
  
  position: absolute;
  left: 0px;
}

.right-div {
  background-color: lightyellow;
  padding: 10px;
  border: 1px solid black;

  position: absolute;
  right: 0px;
  width: 75%;
}

.introduction {
  border: 1px solid black;
  max-width: 100%;
  padding: 10px;
}

<div class="topnav">
  <a class="active" href="index.html">Home</a>
  <a href="all-articles.html">All articles</a>
  <a href="gallery.html">Gallery</a>
  <a href="contact.html">Contact</a>
  <a href="#about">About</a>
</div>

<div class="div-container">

  <div class="left-div">

    <p>Links</p>
    <p>Links go here</p>

  </div>

  <div class="right-div">

    <div class="introduction">

      <h2>Introduction to webpage</h2>

      <p>Lorem ipsum dolor sit amet, ex animal incorrupte
        vel, fuisset fierent ut eam, per semper corrumpit
        adversarium ut. Accumsan adversarium mei ei. Has
        ne veniam inermis dissentias, id sed nibh
        legendos. Vix vivendo scriptorem definitionem ut.
        Cum delenit inimicus et, vis homero libris
        nostrud cu. Sed ei utamur honestatis interesset,
        eu utroque ancillae has. Usu ea habeo iusto,
        rebum cetero elaboraret duo ei. Sea oratio dicant
        dissentiet cu.orem ipsum dolor sit amet, ex
        animal incorrupte vel, fuisset fierent ut eam,
        per semper corrumpit adversarium ut. Accumsan
        adversarium mei ei. Has ne veniam inermis
        dissentias, id sed nibh legendos. Vix vivendo
        scriptorem definitionem ut.
      </p>

    </div>


  </div>

</div>