Question

我是网络开发的新手，对于我的生活，我无法弄清楚代码的问题是什么。我想在左边有一个长元素，下面有一个短元素。然后我希望将两个短元素并排放在长元素上。

所以为了给你画一张非常简单的地图，这就是我之后所说的：

之后的图表

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

HTML

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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>

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

1 个答案: