ウェブページ上のクイズは、小さなビットではなくページ全体を占めています。

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

は<div class="quizbox">

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

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

Answer 2

あなた.containerの、手段を浮かべたのでそれはあります彼らは「浮動」しようとします。つまり、その下のコンテンツがそれらの部門の上で崩壊することを意味します。 clearfixを使用してみてください、基本的にあなたの.containerに以下を追加している：

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

.container:after { 
    clear: both; 
} 

説明：これはclear: bothプロパティを取るあなた浮かべコンテナへの最後の要素として、疑似要素が追加されます。これにより、両側の浮遊コンテンツに関係なく、コンテナを引き下げることになります。