元素即使用左浮動也會正確

Question

我是網絡開發新手，對於我的生活我無法弄清楚我的代碼出現了什麼問題。我想在左邊有一個長元素，下面有一個長元素。然後我想要兩個短的元素並排到長的一個。

如此吸引你一個很簡單的圖這就是我以後是： 什麼，我以後

即使我設定的擴大元素是圖及更小的元素浮動離開，仍然有三個走向右邊。就像我說我是新來這因此它可能是一些愚蠢的，但如果有人能幫助那簡直太好了

小提琴：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的框移到了最後，並在css clear: both中添加了一個名爲「clear」的div。

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>