Question

我试图在我的内容框中排列一些图像，但它们不会并排。相反，他们继续他们的行。文本也应该在图像之下，而不是在图像的右边。任何人都可以看到原因吗？

即使图像下的文字长度不超过30个字符，我也需要找到一种让它们水平排列的方法。

小提琴链接：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

在你的CSS中，你需要把这些行：

.style_title{
   float: left;
}

Float left表示带有填充左侧的“a”框。如果它不起作用，那么试试这个：

#img > a{
   float: left;
}

请参考这些导师： https://www.w3schools.com/css/css_float.asp

Answer 2

你需要在某个时候给出一些立场。

您必须将内容ID更改为content_box才能使css正常工作，除非我遗漏代码。

包含块的元素应该有一个位置;

内联显示的元素应具有相对位置;

内联块内部的内容可以具有绝对位置，或者

例如：

<div id="content_box">
 <div id="my_block">
 <div id="my_block_content">something</div>
 </div>
</div>

CSS;

#content_box{
 position:fixed;   /*Could be anything as long its there*/
}

#my_block{
 position:relative;   
 width : 300px;
 height : 400px;
 display: inline-block;
}

#my_block_content{
 position:absolute;     /*Content absolute inside the inline block*/
 top:30px;
 right:0px;
 min-width:95px;
 height:300px;


}

Answer 3

你只需要在你的CSS中做一些改变。我已更新您的代码

＆＃13;

#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: 100%;
  display: inline-block;
  float: left;
}

.image_box {
  min-width: 100%;
  height: auto;
  display: inline-block;
}

.movie_img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: inline-block;
}

.title {
  min-height: 100px;
  max-width: 100%;
  margin-bottom: 100px;
  display: inline-block;
}
#content{float: left;width: 100%;}
.style_title{width: 25%;float: left;padding: 5px;}

＆＃13;

<div id="content">
  <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>

＆＃13;

Answer 4

您需要将style_title标记设为您的容器，以定义其余部分的内容。通过制作inline-block并将内部元素设计得恰到好处，您将获得所需的一切。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

图像不会排队，文字不会在img下面

4 个答案: