如何将图像移动到html / css中的下一行

Question

我正在为我的大学做一个班级项目，但我似乎无法解决这个问题。任何帮助将不胜感激！基本上我想显示菜单，但图像不断重叠。我希望图像显示在下一行。我们的想法是在一行上制作4幅图像，在下一行制作下4幅图像。

我的hmtl代码：

＆＃13;

＆＃13;

.box {
  float: left;
  margin-right: 10px;
  text-align: center;
  height: 50px;
}

.box img {
  height: 220px;
  width: 360px;
}

＆＃13;

<!-- Tab content -->
<div id="Dim Sum" class="tabcontent">
  <h3>Dim Sum</h3>
  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>小笼包 Chinese Dumpling Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>叉烧包 BBQ Pork Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>流沙包 Salted Egg Yoke Custard Lava Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>豆沙包 Red Bean Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>黑芝麻包 Black Sesame Buns</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是你的想法：

.box {
  margin-right: 10px;
  text-align: center;
  height: 50px;
  display:inline-block;
}

.box img {
  height: 220px;
  width: 360px;
}

<!-- Tab content -->
<div id="Dim Sum" class="tabcontent">
  <h3>Dim Sum</h3>
  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>小笼包 Chinese Dumpling Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>叉烧包 BBQ Pork Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>流沙包 Salted Egg Yoke Custard Lava Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>豆沙包 Red Bean Buns</div>
  </div>

  <div class="box">
    <img src="http://lorempixel.com/300/200/" />
    <div>黑芝麻包 Black Sesame Buns</div>
  </div>

我已使用inline-block来获得此结果。