请参阅图像以供参考
嘿，
所以我得到了一个网站，我在那里展示热门电影，但有些电影的标题比其他的要长。我如何使用 CSS 样式，以便我可以使所有电影细节按钮都显示在同一级别，然后与上气相比，例如将标题侏罗纪狩猎居中。
希望我的解释是好的。提前致谢
据我了解您的问题，您希望将所有按钮设置在同一级别。只需简单地设置要在其中写入该段落的元素的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StackOberFLow</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns:repeat(4,auto);
margin: 50px;
border: 2px solid black;
}
img {
height: 200px;
width: 150px;
}
.innerbox {
border: 2px solid red;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 500px;
margin: 10px;
}
.boxelement p{
height: 150px;
}
.boxelement{
margin: 5px ;
padding: 5px;
}
.btn{
background-color: blueviolet;
border-radius: 10px;
padding: 10px 10px;
color:white;
border: 2px solid red;
}
.btn:hover{
cursor: pointer;
background-color: white;
color: black;
position: relative;
bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,
facilis.
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
corrupti quasi laborum ducimus odit provident magni, molestiae
perspiciatis nemo porro.
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
<div class="innerbox">
<div class="boxelement">
<img
src="https://m.media-amazon.com/images/M/MV5BOTk5ODg0OTU5M15BMl5BanBnXkFtZTgwMDQ3MDY3NjM@._V1_QL50_SY1000_CR0,0,674,1000_AL_.jpg"
alt="img"
/>
</div>
<div class="boxelement">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis,
quas reiciendis. Quod, modi! Aut iusto perspiciatis iure assumenda,
nesciunt ipsa expedita omnis aliquam dolore ipsum?
</p>
</div>
<div class="boxelement">
<button class="btn" type="submit">Movie Details</button>
</div>
</div>
</div>
</body>
</html>
如您所见，我刚刚添加了<p>标签的高度，并且所有内容都会自动设置。
.boxelement p{
height: 150px;
}
您可以通过复制文件并使用实时服务器打开来检查此代码。
顺便说一下，如果你知道引导程序，那么你可以很容易地使用引导程序卡来做到这一点。在这里，一切都已得到管理，您无需担心网站的响应能力。
如果有任何拼写错误，请不要介意。谢谢
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句