在網頁上的測驗是整個頁面而不是一點點

Question

我有一個網頁，其中的一些信息+最後的測驗。 問題是測驗幾乎覆蓋了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>

Answer 1

與style="clear:both;"添加div標籤quizbox <div class="quizbox">

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

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

Answer 2

這是因爲你的浮動.container s，這意味着他們會嘗試「浮動」，這意味着它們下面的內容將在這些div之上崩潰。嘗試使用clearfix，這基本上是添加以下到您的.container：

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

.container:after { 
    clear: both; 
} 

說明：這增加了一個僞元素作爲最後一個元素到你的浮動容器，其將採取clear: both財產。無論任何一方浮動的內容如何，​​這都會使其拉下容器。