html - 图片不会排列，文字不会在 img 下

Question

我试图让一些图像在我的内容框中排列，但它们不会并排显示。相反，他们各行其是。文本也应该位于图像下方而不是右侧。谁能看出原因？

我还需要找到一种方法让它们水平排列，即使图像下方的文本长度不同(最多 30 个字符)也是如此。

fiddle 链接:https://fiddle.jshell.net/jkyq9y0u/

<div id="content_box">
  <div id="img">
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
  </div>
</div>

#content_box {
  background-color: #ffffff;
  min-width: 100%;
  min-height: 75vh;
  text-align: center;
  overflow-y: auto;
  display: inline-block;
}

/* styling for the movie images and titles */

#img {
  min-height: 100%;
  max-width: 60%;
  display: inline-block;
}

.image_box {
  min-width: 100%;
  min-height: 100%;
  display: inline-block;
}

.movie_img {
  max-width: 20%;
  height: auto;
  border-radius: 10px;
  display: inline-block;
}

.title {
  min-height: 100px;
  max-width: 100%;
  margin-bottom: 100px;
  display: inline-block;
}

Answer 1

您需要将 style_title 标记作为定义其余内容的容器。通过使其成为 inline-block 并适本地设置内部元素的样式，您将获得所需的内容。

#content_box {
  background-color: #ffffff;
  min-width: 100%;
  min-height: 75vh;
  text-align: center;
  overflow-y: auto;
  display: inline-block;
}

/* styling for the movie images and titles */

#img {
  /*max-width: 60%;
  display: inline-block;*/
}

.image_box {
  display: inline-block;
  width:30%;
}

.style_title
{
  display:inline-block;
}

.movie_img {
  height: auto;
  border-radius: 10px;
  display: inline-block;
}

.title {
  min-height: 100px;
  max-width: 100%;
  margin-bottom: 100px;
  display: block;
}

<div id="content">
  <div id="img">
    <a href="link" class="style_title" target="_blank">
      <div  class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div  class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div  class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
  </div>
</div>