Question

我想将banner div放在另一个下面。我尝试使用display和position属性的不同组合，但它不起作用。它们显示在彼此之上。我希望我的输出首先是横幅，然后在它下面是图像行，在行下面是第二个横幅。

.row div:first-child {
  margin-left: 0;
}
.row div {
  display: inline-block;
  margin-left: 5%;
}
.row div img {
  max-width: 100%;
  max-height: 100%;
}
.row div a {
  word-wrap: break-word;
  text-decoration: none;
  color: #515150;
}
.row div a:hover,
.row div img:hover {
  color: black;
}
.img-container {
  display: inline-block;
  float: left;
  padding-top: 40px;
  padding-bottom: 20px;
  text-align: center;
  width: 150px;
}
.banner {
  padding-top: 20px;
  border-bottom: 2px solid black;
  margin-left: 5%;
  color: black;
  font-size: 20px;
}

<div class="banner">
  <h3>TOP SELLING</h3>
  <div class="row">
    <div class="img-container">
      <a href="#">
        <img src="martial.png">
      </a>
    </div>
    <div class="img-container">
      <a href="#">
        <img src="bvb.png">
      </a>
    </div>
    <div class="img-container">
      <a href="#">
        <img src="ars.png">
      </a>
    </div>
    <div class="img-container">
      <a href="#">
        <img src="lewandowski1.png">
      </a>
    </div>
  </div>
</div>

<div class="banner">
  <h3>TOP SELLING</h3>
  <div class="row">
    <div class="img-container">
      <a href="#">
        <img src="martial.png">
      </a>
    </div>
    <div class="img-container">
      <a href="#">
        <img src="bvb.png">
      </a>
    </div>
    <div class="img-container">
      <a href="#">
        <img src="ars.png">
      </a>
    </div>
    <div class="img-container">
      <a href="#">
        <img src="lewandowski1.png">
      </a>
    </div>
  </div>
</div>

PS：我也试过为横幅使用不同的ID，但它不起作用。

Answer 1

添加.banner {clear:both}或从float移除不必要的.img-container（display:inline-block已经完成该作业。）

将div放在另一个下面

1 个答案: