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左边允许其他内容坐在旁边。您也可能不需要float:right上的.article1。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您创建的框未出现在您的部分内部的原因是因为div“gojima”隐式设置为“display：block”，尽管您没有更改此div的样式。

要解决您的问题，只需对您的css文件进行编辑：

.gojima {
    display: inline-block;
  }

Answer 3

要将图片和文本块并排放置，您应该将float: left;或display: inline-block添加到每个section（.gojima, .mbassy）的第一个孩子，并申请与第一部分的第二个孩子（.article1, .article2）相同的CSS到第二部分的第二个孩子：

#main {
  clear: both;
  width: 960px;
  height: 350px;
  background-color: #7EFFF7;
}

.gojima, .mbassy {
float: left;
}

.article1, .article2 {
  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>

为什么我的盒子没出现在我的部分？

3 个答案: