gpt4 book ai didi

html - 使用 CSS 部分重叠元素

转载 作者:技术小花猫 更新时间:2023-10-29 12:07:12 26 4
gpt4 key购买 nike

我想部分重叠多个 HTML 元素(比如 DIV),如下图所示。黑边矩形(Hanafuda 卡片)代表我想要重叠的元素。

enter image description here

使用 Javascript 我确信我可以想出一些办法,但我想知道是否有纯 CSS 解决方案。我考虑过相对定位,但问题是每张卡片都需要沿 x 轴越来越大的偏移量。

理想情况下,我希望重叠的程度取决于有多少空间,这样元素在拥挤时会更加拥挤,但这是次要的,我不介意使用 JS 来实现它。

最佳答案

您可以使用 flex 实现这一点,使除最后一张以外的所有卡片都适应剩余空间

这是一个fiddle以下:

.container {
display: flex;
width: 300px;
}
.card-container {
flex: 1 0 0;
overflow-x: hidden;
}
.card-container:last-child {
flex: 0 0 auto;
}
.card {
background: linear-gradient(to right, #ccc 0%, #444 100%);
width: 100px;
height: 150px;
}
<div class="container">
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
<div class="card-container">
<div class="card"></div>
</div>
</div>

关于html - 使用 CSS 部分重叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31128349/

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