gpt4 book ai didi

html - 如何固定段落的位置

转载 作者:太空宇宙 更新时间:2023-11-04 01:41:25 25 4
gpt4 key购买 nike

Fiddle这是我的代码:

.recommendedmovies {
overflow: auto;
white-space: nowrap;
text-align: center;
}

.moviescard {
width:185px;
list-style-type:none;
display:inline-block;
height:450px;
vertical-align: top;
white-space: normal;
}

.movierating {
}
<div class="recommendedmovies">
<ol>
<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/imekS7f1OuHyUP2LAiTEM0zBzUz.jpg" width="217px" height="325px" />
<p class="moviename">Wonder Woman</p>
<p class="movierating">8/10</p>
</li>
<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/xbpSDU3p7YUGlu9Mr6Egg2Vweto.jpg" width="217px" height="325px" />
<p class="moviename">Pirates of the Caribbean: Caribbean: Dead Men Tell No Tales </p>
<p class="movierating">6/10</p>
</li>
<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/2n4x2FRcmMIsHxcucxvWxb0Yry6.jpg" width="217px" height="325px" />
<p class="moviename">War for the Planet of the Apes</p>
<p class="movierating">5/10</p>
</li>
</ol>
</div>

我想让评分在电影名称下方,保持在一行中,如屏幕截图所示(在假想的红线上)。

如果您需要更多信息,请告诉我,谢谢。

enter image description here

最佳答案

.movi​​escard 位置设置为相对(上下文),并将 .movi​​erating 绝对定位到卡片底部。

.recommendedmovies {
overflow: auto;
white-space: nowrap;
text-align: center;
}

.moviescard {
position: relative;
width: 185px;
list-style-type: none;
display: inline-block;
height: 450px;
vertical-align: top;
white-space: normal;
}

.movierating {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="recommendedmovies">
<ol>
<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/imekS7f1OuHyUP2LAiTEM0zBzUz.jpg" width="217px" height="325px" />
<p class="moviename">Wonder Woman</p>
<p class="movierating">8/10</p>
</li>


<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/xbpSDU3p7YUGlu9Mr6Egg2Vweto.jpg" width="217px" height="325px" />
<p class="moviename">Pirates of the Caribbean: Caribbean: Dead Men Tell No Tales </p>
<p class="movierating">6/10</p>
</li>


<li class="moviescard">
<img class="lazy" src="http://image.tmdb.org/t/p/w185/2n4x2FRcmMIsHxcucxvWxb0Yry6.jpg" width="217px" height="325px" />
<p class="moviename">War for the Planet of the Apes</p>
<p class="movierating">5/10</p>
</li>



</ol>

</div>

关于html - 如何固定段落的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45344779/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com