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

Question

我正在为我的大学做一个类元素，但我似乎无法解决这个问题。任何帮助将不胜感激!基本上我想显示一个菜单，但图像一直重叠。我希望图像显示在下一行。这个想法是在一行上制作 4 张图像，在下一行制作接下来的 4 张图像。

我的 hmtl 代码:

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

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

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为了获得这个结果。