logo标签列表

图片排列不齐，文字无法在图片下方。

htmlcssimage
4
我正在尝试让一些图像在我的内容框中排成一行，但它们不会并排。相反，它们会各自占据一行。文本也应该放在图像下方，而不是右侧。有人能看出原因吗？
我还需要找到一种方法，即使图像下方的文本长度不同，最多为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;
}
你有注意到HTML中的content id和CSS中的content_box吗？可能不会修复它，但是... - MadeInDreams
Id的值必须是唯一的。 - Jon P
是的，content_box只是我在fiddle中犯的一个打字错误。在我的代码中是正确的。我知道id必须是唯一的。我只是复制/粘贴它。它在样式中并没有真正使用，但在代码中，当php代码运行时，它们将被命名为image0、image1等。 - user9043954
4个回答
0

你只需要在你的CSS中做一些改动。 我已经更新了你的代码

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

谢谢！我使用了上面的例子，但这个也可以工作！ - user9043954
0
你需要将 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>

0
在你的 CSS 中，你需要加入这些代码行：
.style_title{
   float: left;
}

浮动到左边意味着“a”框将填充到左侧。如果不起作用，请尝试以下方法：

#img > a{
   float: left;
}

请参考以下教程： https://www.w3schools.com/css/css_float.asp
它会让标题显示在图片下方，但不会让图片并排显示。我在使用不同的浏览器时遇到了一些有关浮动的糟糕经历，所以尽可能地避免使用它。但我想我可能一直在错误地使用它。尽管如此，我仍然无法使这些图片对齐。 - user9043954
0

你需要在某个时候给出一些位置。

除非我漏掉了代码，否则你必须将内容 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;


}
是的，content id 是我的错。在代码中应该是 content_box。只是在 fiddle 上打字错误了。但当我设置绝对定位时，所有的图片都会叠在一起。 - user9043954
你将什么设置为绝对值了吗？ - MadeInDreams
我将 #content_box 的位置设为 fixed；#img 的位置设为 relative；.image_box 的位置设为 absolute。 - user9043954
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接