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

Question

我是 web 开发的新手，对于我的生活，我无法弄清楚我的代码有什么问题。我想要一个长元素，左边有一个短元素。然后我想要两个短元素与长元素并排放置。

为了给你画一张非常简单的 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 的框移到了最后，并添加了一个名为“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>