html - 网页上的测验占据了整个页面，而不是一小部分

我有一个网页，上面有一些信息，最后是测验。
问题在于测验几乎覆盖了整个whoel页面。它必须在最后一段下面。

任何人都可以看到问题所在吗？

https://plnkr.co/edit/8re5W6mz73pnU40WaXP8?p=preview

这是代码的一部分，否则将太长->

.container {
  float: left;
  margin: 0 auto;
  width: 100%;
}

.left {
  width: 30%;
  margin: 05% 00% 00% 05%;
}

.imageleft {
  float: left;
}

.paragraphs {
  margin: 5% 30% 2% 20%;
  width: 40%;
}

.right {
  width: 30%;
  float: right;
  margin: -11% 00% 00% 40%;
}

.imageright {
  width: 300px;
}

.quizbox {
  width: 70%;
  max-width: 950px;
  border: 1px gray solid;
  margin: auto;
  padding: 10px;
  border-radius: 10px;
  border-width: 5px;
  border-color: #00A7AE;
  margin-top: 7%;
  text-align: center;
  position: relative;
  background: #73B7DB;
}

<div class="container">
  <div class="left">
    <a class="imageleft circle" id="quiz">
      <font color="white">How</font>
    </a>
  </div>
  <div class="paragraphs">

    Geographische Informationssysteme werden in der Mobilitätsforschung eingesetzt, um <b>mehrere Perspektiven auf Verkehrssysteme und das Mobilitätsverhalten</b> miteinander in Beziehung zu setzen. Als gemeinsamer Nenner der verschiedenen Zugänge dient
    stets die räumliche Koordinate. Damit ist es möglich, in komplexen Fragestellungen mehrere Ansätze zu kombinieren und ganzheitliche Lösungen zu erzielen.
  </div>
  <div class="right">
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/quiz300x200-300dpi.jpg" />
  </div>

</div>

<div class="quizbox">

  <!-- open main div -->
  <h1><span style="color:#00995D">Quiz</span></h1>
  <form id="form1" action=" ">
    <div class="row">
      <h3>Moths are a member of what order?</h3>
    </div>

    <div class="row">
      <input name="variable" type="radio" value="0" /> Octagon <span class="explanation" id="answer1" style="color:red"></span></div>

    <div class="row">
      <input name="variable" type="radio" value="0" /> Leprosy <span class="explanation" id="answer2" style="color:red"></span></div>

    <div class="row">
      <input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="answer3" style="color:green"></span></div>
    &nbsp;
    <div class="row">
      <h3>Question 2</h3>
    </div>
    <div class="row">
      <input name="sub" type="radio" value="33" />Answer 1 <span class="explanation" id="answer4" style="color:green"></span></div>

    <div class="row">
      <input name="sub" type="radio" value="0" />Answer 2 <span class="explanation" id="answer5" style="color:red"></span></div>

    <div class="row">
      <input name="sub" type="radio" value="0" />Answer 3 <span class="explanation" id="answer6" style="color:red"></span></div>
    &nbsp;
    <div class="row">
      <h3>Question 3</h3>
    </div>
    <div class="row">
      <input name="con" type="radio" value="0" />Answer 1 <span class="explanation" id="answer7" style="color:red"></span></div>
    <div class="row">
      <input name="con" type="radio" value="33" />Answer 2 <span class="explanation" id="answer8" style="color:green"></span></div>
    <div class="row">
      <input name="con" type="radio" value="0" />Answer 3 <span class="explanation" id="answer9" style="color:red"></span></div>
    <p>
      <p> <input type="submit" onclick="myFunction()" value="Check" /> </p>
    </p>
  </form>


</div>

最佳答案

在测验框div之前添加带有style="clear:both;"的<div class="quizbox">标记

 <div style="clear:both;"></div>

 <div class="quizbox">
  content
 </div>

关于html - 网页上的测验占据了整个页面，而不是一小部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45545839/