具有灵活宽度的固定高度 div [关闭]

A fixed height div with flexible width [closed]

提问人:Satyam Mishra 提问时间:11/18/2023 最后编辑:Satyam Mishra 更新时间:11/18/2023 访问量:35

问:


编辑问题以包括所需的行为、特定问题或错误以及重现问题所需的最短代码。这将帮助其他人回答这个问题。

2天前关闭。

我必须创建一行高度相似的 s,但宽度必须适应 div 中的内容。 请参阅下图以供参考。请注意,div 的宽度会适应其中的内容,并且尽可能小。同时,所有卡片的高度都是恒定的。div

Reference Image

有没有办法创建卡片布局?我会有一排卡片(容器可水平滚动)。

HTML CSS格式

评论

0赞 Mihai T 11/18/2023
(几乎)一切皆有可能。但问题是,你试图使这个特定要求成为可能吗?
0赞 Satyam Mishra 11/18/2023
@MihaiT我试过了,(用到装有卡片的容器。我还尝试了在父级上显示 flexbox。但是,想不出什么了。display: gridgrid-template-rows: 1fr;
2赞 Mihai T 11/18/2023
请在问题中的代码片段中分享您尝试过的内容。否则你不会让人帮助你
0赞 isherwood 11/18/2023
请参阅如何询问参观。我们不是免费的编码服务。

答:

-2赞 hemoglobin 11/18/2023 #1

如果您想采用这种方法,可以使用 flexbox 来实现这一点。当然,您可以添加很多内容,但最主要的是将 a 添加到父元素和其子元素中,以实现内联方向。display: flexflex-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
不过,这确实保持了恒定的高度。