html - 为什么我的框没有出现在我的部分中？

Question

我不明白为什么我创建的框没有出现在我的部分中。我上面有一个幻灯片，但我认为它不会影响它。我已经检查过它的尺寸是否适合该部分，但它出现在正下方。 What it looks like

这是我的 HTML:

#main {
  clear: both;
  width: 960px;
  height: 350px;
  background-color: #7EFFF7;
}

.gojima {}

.article1 {
  float: right;
  display: inline-block;
  background: -moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%);
  /* FF3.6-15 */
  position: relative;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-color: #e1e1e1;
  height: 295px;
  width: 650px;
  margin-right: 0px;
}

.article1 h1 {
  font-size: 30px;
  text-align: center;
  position: relative;
  bottom: 15px;
  font-family: 'Economica', sans-serif;
}

.article1 p {
  font-size: 20px;
  padding-left: 15px;
  padding-top: 10px;
  padding-right: 15px;
  font-family: 'Playfair Display', serif;
}

#main2 {
  clear: both;
  width: 960px;
  height: 350px;
  background-color: #000;
}

<section id="main">
  <div class="gojima">
    <a href="#"><img src="images/pic1.jpg" alt="hp1" width="300" height="300" /></a>
  </div>

  <div class="article1">
    <h1> THE RICE BURGER TREND</h1>
    <p>Guess what? Burger nerds stuck in an unending "brioche vs milk bun" argument now have a new topic to battle: the bun-free burger. They can test out the merits of this trend at Gojima, Sydney's first rice burger bar, which opened at The Star.</p>
  </div>

</section>


<section id="main2">
  <div class="mbassy">
    <a href="#"><img src="images/pic2.jpg" alt="hp2" width="300" height="300" /></a>
  </div>

  <div class="article2">
    <h2> THE LOCAL EMBASSY BOILER-ROOM</h2>
    <p> On a bright corner of Wattle Street in Ultimo is a busy cafe, The Local Mbassy. Soft music from the ‘20s plays and locals enjoy the view across Wentworth Park, tucking into burgers, pancakes and pans of baked eggs and sipping on Campos coffee.</p>
  </div>

</section>

Answer 1

您需要将 .gojima 向左浮动，以便让其他内容位于其旁边。您也可能不需要 .article1 上的 float:right。

#main {
  clear: both;
  width: 960px;
  height: 350px;
  background-color: #7EFFF7;
}

.gojima {
  float: left;
}

.article1 {
  float: right;
  display: inline-block;
  background: -moz-linear-gradient(top, #77ebcf 20%, #ffffff 20%);
  /* FF3.6-15 */
  position: relative;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-color: #e1e1e1;
  height: 295px;
  width: 650px;
  margin-right: 0px;
}

.article1 h1 {
  font-size: 30px;
  text-align: center;
  position: relative;
  bottom: 15px;
  font-family: 'Economica', sans-serif;
}

.article1 p {
  font-size: 20px;
  padding-left: 15px;
  padding-top: 10px;
  padding-right: 15px;
  font-family: 'Playfair Display', serif;
}

#main2 {
  clear: both;
  width: 960px;
  height: 350px;
  background-color: #000;
}

<section id="main">
  <div class="gojima">
    <a href="#"><img src="images/pic1.jpg" alt="hp1" width="300" height="300" /></a>
  </div>

  <div class="article1">
    <h1> THE RICE BURGER TREND</h1>
    <p>Guess what? Burger nerds stuck in an unending "brioche vs milk bun" argument now have a new topic to battle: the bun-free burger. They can test out the merits of this trend at Gojima, Sydney's first rice burger bar, which opened at The Star.</p>
  </div>

</section>


<section id="main2">
  <div class="mbassy">
    <a href="#"><img src="images/pic2.jpg" alt="hp2" width="300" height="300" /></a>
  </div>

  <div class="article2">
    <h2> THE LOCAL EMBASSY BOILER-ROOM</h2>
    <p> On a bright corner of Wattle Street in Ultimo is a busy cafe, The Local Mbassy. Soft music from the ‘20s plays and locals enjoy the view across Wentworth Park, tucking into burgers, pancakes and pans of baked eggs and sipping on Campos coffee.</p>
  </div>

</section>