提问人:Satyam Mishra 提问时间:11/18/2023 最后编辑:Satyam Mishra 更新时间:11/18/2023 访问量:35
具有灵活宽度的固定高度 div [关闭]
A fixed height div with flexible width [closed]
问:
我必须创建一行高度相似的 s,但宽度必须适应 div 中的内容。
请参阅下图以供参考。请注意,div 的宽度会适应其中的内容,并且尽可能小。同时,所有卡片的高度都是恒定的。div
有没有办法创建卡片布局?我会有一排卡片(容器可水平滚动)。
答:
-2赞
hemoglobin
11/18/2023
#1
如果您想采用这种方法,可以使用 flexbox 来实现这一点。当然,您可以添加很多内容,但最主要的是将 a 添加到父元素和其子元素中,以实现内联方向。display: flex
flex-direction: row
.container {
display: flex;
flex-direction: row;
gap: 15px;
}
.column {
border: 1px solid #000;
padding: 15px;
}
<div class="container">
<div class="column">
<p>Card</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
</div>
<div class="column">
<p>Card</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>
</div>
</div>
评论
0赞
Satyam Mishra
11/18/2023
内联方向不是重点。关键是根据内容设置每张卡片的宽度,同时保持恒定的高度。不过,可以使用 实现恒定高度,每张卡的宽度取决于容器中的可用空间。align-items: stretch
0赞
hemoglobin
11/18/2023
不过,这确实保持了恒定的高度。
上一个:iFrame 不显示视频
评论
display: grid
grid-template-rows: 1fr;