html - 即使向左浮动，元素也会向右移动

Question

我是网络开发新手，我一生都无法弄清楚我的代码有什么问题。我想要一个长元素，在其左侧下方有一个短元素。然后我想要两个短元素与长元素并排。

所以为了给你画一张非常简单的 map ，这就是我想要的: 我所追求的图表

即使我将较大的元素和较小的元素设置为向左浮动，仍然有三个元素向右浮动。就像我说的，我对此很陌生，所以这可能很愚蠢，但如果有人可以提供帮助，那就太好了

fiddle :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>