新しいセクションが浮動小数点に設定された別のセクションの下に表示されます

Question

問題が発生しました。私の現在のプロジェクトでは、2つのセクションが隣り合っていて、両方ともページの幅の50％をカバーするように設定されています。浮動小数点：leftとfloat：rightです。しかし、ページを続けるためにまだ別のセクションを追加しようとすると、正しく表示されないことに気づき、Firefoxのinspect要素は前の2つのセクションの後ろにそのほとんどを示します。ここで

はコードです：

<section id="first-half"> 
    <div class="container"> 
     <a href="#" class="content-page"> 
     <div class="selectoption"> 
      <img src="image.png"> 
     </div> 
     </a> 
    </div> 
</section> 
<section id="second-half">  
<div class="container"> 
    <a href="#" class="content-two-page"> 
    <div class="optionselect-two"> 
      <img src="image_2.png"> 
    </div> 
    </a> 

</section> 

CSS

#first-half {width: 50%; height: 100%;background-image: url('image.png'); overflow: hidden; float: left; } 
#second-half {width: 50%; height: 100%; background-image: url('image.png'); overflow: hidden; float: right } 

はどのpotentional回答いただきありがとうございます。

編集：コメント欄にはとても親切kukkuzを引用すると：

「あなたはフロートをクリアしていないとして、新しい要素は、前の2を下回っている - あなたは、常に明確な浮動コンテナがしなければならない - example here見る」

を彼らの助けのためのみんなに

おかげ

Answer 1

div {height: 200px;} 
 
#first-half {width: 50%; height: 100%;background-image: url('image.png'); overflow: hidden; float: left; } 
 
#second-half {width: 50%; height: 100%; background-image: url('image.png'); overflow: hidden; float: right }

<div> 
 
    <section id="first-half"> 
 
    <div class="container"> 
 
     <a href="#" class="content-page"> 
 
     <div class="selectoption"> 
 
      <img src="image.png"> 
 
     </div> 
 
     </a> 
 
    </div> 
 
</section> 
 
<section id="second-half">  
 
<div class="container"> 
 
    <a href="#" class="content-two-page"> 
 
    <div class="optionselect-two"> 
 
      <img src="image_2.png"> 
 
    </div> 
 
    </a> 
 
    </div> 
 
</section> 
 
</div>

Answer 2

それはあなたが必要なものですか？

section { 
 
    height: 100%; 
 
    background-image: url('image.png'); 
 
    overflow: hidden; 
 
    float: left; 
 
} 
 
#inline { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
    -webkit-justify-content: space-around; 
 
    flex-wrap: nowrap; 
 
    -webkit-flex-wrap: nowrap; 
 
}

<div id="inline"> 
 
    <section id="first-half"> 
 
    <div class="container"> 
 
     <a href="#" class="content-page"> 
 
     <div class="selectoption"> 
 
      <img src="image.png"> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </section> 
 
    <section id="second-half"> 
 
    <div class="container"> 
 
     <a href="#" class="content-two-page"> 
 
     <div class="optionselect-two"> 
 
      <img src="image_2.png"> 
 
     </div> 
 
     </a> 
 

 
    </section> 
 
    <section id="second-half"> 
 
    <div class="container"> 
 
     <a href="#" class="content-two-page"> 
 
     <div class="optionselect-two"> 
 
      <img src="image_2.png"> 
 
     </div> 
 
     </a> 
 

 
    </section> 
 

 
    </div>