我试图让一些图像在我的内容框中排列,但它们不会并排显示。相反,他们各行其是。文本也应该位于图像下方而不是右侧。谁能看出原因?
我还需要找到一种方法让它们水平排列,即使图像下方的文本长度不同(最多 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;
}
最佳答案
您需要将 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>
关于html - 图片不会排列,文字不会在 img 下,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47626201/