浮動小数点が残っていても要素は右に移動します

Question

私はウェブ開発には新しく、私の人生の間、私のコードの問題点は分かりません。私は左に短い要素が1つ長い要素を持っています。それから私は2つの短い要素を長いものに並べていたい。そうこれは私が後だものですあなたは非常にシンプルなマップを描画する

： 私はfloatに大きな要素と小さい要素を設定していても

後だよ何のダイアグラム左、まだ3つは右に行く。 https://jsfiddle.net/es09vLc0/

HTML

html { 
 
    background-color:black; 
 
} 
 
.blogPostsContainer { 
 
    width:100%; 
 
    border:solid; 
 
    margin-top:100px; 
 
} 
 
.blogPost { 
 
    display:inline-block; 
 
    background-color:black; 
 
    width:49%; 
 
    border:solid; 
 
    border-color:#FFF010; 
 
    border-radius:1px; 
 
    color:white; 
 
    margin-top:10px; 
 
    height:240px; 
 
    overflow:hidden; 
 
} 
 
.blogPost h3 { 
 
    color:white; 
 
} 
 
.blogPost h1 {  
 
    text-align:center; 
 
    border-color:dodgerblue; 
 
    border:solid; 
 
    border-left:none; 
 
    border-right:none; 
 
} 
 
.blogPost img { 
 
    width:95%; 
 
    height:200px; 
 
    margin:10px; 
 
}

<div class="BlogPostsContainer"> 
 
    <div class="blogPost" style="height:700px; float:left"> 
 
    <img src="home_page/images/test/hqdefault-1.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
    </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-2.jpg" /> 
 
    <h1>DESCRIPT</h1> 
 
    <h3>THIS IS DESCRIPTIONNNN 
 
    </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:left"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
    </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
     This is the description.This is the description.This is the description.This is the description. 
 
    </h3> 
 
    </div> 
 
</div>

：私はそれはおそらく愚かな何かですので、私はこれに新しいんだけど、誰が助けることができればそれは素晴らしい

フィドルだろう言ったように

Answer 1

float: leftのボックスを最後まで移動し、 "clear"という名前のdivをcss clear: bothで追加しました。

html { 
 
    background-color: black; 
 
} 
 
.blogPostsContainer { 
 
    width: 100%; 
 
    border: solid; 
 
    margin-top: 100px; 
 
} 
 
.blogPost { 
 
    display: inline-block; 
 
    background-color: black; 
 
    width: 49%; 
 
    border: solid; 
 
    border-color: #FFF010; 
 
    border-radius: 1px; 
 
    color: white; 
 
    margin-top: 10px; 
 
    height: 240px; 
 
    overflow: hidden; 
 
} 
 
.blogPost h3 { 
 
    color: white; 
 
} 
 
.blogPost h1 { 
 
    text-align: center; 
 
    border-color: dodgerblue; 
 
    border: solid; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 
.blogPost img { 
 
    width: 95%; 
 
    height: 200px; 
 
    margin: 10px; 
 
} 
 
.clear { 
 
    clear: both; 
 
}

<div class="BlogPostsContainer"> 
 
    <div class="blogPost" style="height:700px; float:left"> 
 
    <img src="home_page/images/test/hqdefault-1.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
      </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-2.jpg" /> 
 
    <h1>DESCRIPT</h1> 
 
    <h3>THIS IS DESCRIPTIONNNN 
 
      </h3> 
 
    </div> 
 
    <div class="blogPost" style="float:right"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
      </h3> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="blogPost" style="float:left"> 
 
    <img src="home_page/images/test/hqdefault-3.jpg" /> 
 
    <h1>This is the Title section</h1> 
 
    <h3>This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
       This is the description.This is the description.This is the description.This is the description. 
 
      </h3> 
 
    </div> 
 
</div>