html - 如何将标题与图片放在html下面

Question

我正在尝试创建我网站的一部分，其中连续有多张图片，上面有标题。我已经把照片排成一排，但也无法将标题排成一排。我试过使用 display: inline;对于两者，但它似乎不起作用。这个问题的解决方案是什么。

.mobile_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
  margin-left: 65px;
  font-family: 'Oswald', sans-serif;
}

.web_title {
  margin-top: 25px;
  font-size: 25px;
  color: black;
  margin-left: 200px;
  font-family: 'Oswald', sans-serif;
  display: inline-block;
}

.mobile {
  margin-top: 30px;
  margin-left: 100px;
  display: inline-block;
}

.mobile1 {
  margin-top: 30px;
  margin-left: 25px;
  display: inline-block;
}

.laptop {
  margin-left: 200px;
  margin-top: 45px;
  display: inline-block;
}

.coding {
  margin-left: 200px;
  margin-top: 45px;
  display: inline-block;
}

.database {
  margin-left: 200px;
  margin-top: 45px;
  display: inline-block;
}

<div class="mobile_title">Mobile Development</div>

<div class="web_title">Web Development</div>

<img src="http://via.placeholder.com/50x100" width=50 height=100 class="mobile">

<img src="http://via.placeholder.com/50x100" width=50 height=100 class="mobile1">

<img src="http://via.placeholder.com/150x100" width=150 height=100 class="laptop">

<img src="http://via.placeholder.com/150x100" width=150 height=100 class="coding">

<img src="http://via.placeholder.com/150x110" width=150 height=110 class="database">

手机标题是第一个。我知道需要知道如何将其他标题合并到同一行中。非常感谢您的帮助

Answer 1

使用 bootstrap 的行和列类比使用 vanilla css 更容易实现。您可以使用他们的 CDN 将您的 html 文件链接到 Bootstrap ，并向每个标题和图像集添加列类:

<div class="row">
  <div class="col-md-2 text-center">
    <div class="mobile_title">Mobile Development</div>
    <img src="mobile.png" width=50 height=100 class="mobile">
  </div>
  <div class="col-md-2 text-center">
    <div class="mobile_title">Mobile Development</div>
    <img src="mobile.png" width=50 height=100 class="mobile">
  </div>
</div>

这就是您的 html 代码最终的样子。确保所有列类都包含在行类中。要将 Bootstrap 添加到您的 html 代码，只需点击此链接并复制您在页面上看到的第一个链接标记并将其粘贴到您的 html head 部分的底部:Bootstrap CDN