我正在尝试让一些图像在我的内容框中排成一行,但它们不会并排。相反,它们会各自占据一行。文本也应该放在图像下方,而不是右侧。有人能看出原因吗?
我还需要找到一种方法,即使图像下方的文本长度不同,最多为30个字符,也可以将它们水平对齐。
示例链接:https://fiddle.jshell.net/jkyq9y0u/
我还需要找到一种方法,即使图像下方的文本长度不同,最多为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;
}