css - 如何修复没有彼此相邻的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>