Question

我有一个网页，其中包含一些信息+最后一个测验。问题是测验几乎覆盖了整个页面。它必须低于最后一段。

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

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

这是代码的一部分，否则会太长 - ＆gt;

.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>

Answer 1

这是因为你已经浮动了你的.container，这意味着他们会尝试“浮动”，这意味着他们下面的内容会在这些div之上崩溃。尝试使用clearfix，它基本上将以下内容添加到.container：

.container:before,
.container:after {
    content: ' ';
    display: table;
}

.container:after {
    clear: both;
}

说明：这会将一个伪元素添加到浮动容器的最后一个元素，该元素将采用clear: both属性。无论任何一方的浮动内容如何，这都会使其拉下容器。

Answer 2

在测验框div

之前添加style="clear:both;"标记<div class="quizbox">

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

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

网页上的测验是整页而不是一点点

2 个答案: