如何在屏幕变窄时将元素靠得更近？

Question

我正在使用负边距使一些扑克牌元素重叠，从而产生类似于现实生活中一手扑克牌的视觉效果。

这里的问题是负边距是在 vw 中定义的。这意味着随着屏幕尺寸变大，单个vw的值变大，负边距变大，导致卡片重叠更多。这与我的意图相矛盾——随着屏幕变宽，卡片应相应展开，并随着屏幕变窄而重叠更多。

如果我改为使用像 px 这样的绝对值，重叠将随着屏幕尺寸的变化而保持不变，这也是不可取的。

我花了很多时间试错这个问题，但还没有想出一个能正常工作的方案。

如果CSS一个人做不到，你怎么能使负边距随着屏幕的增加而减少，用CSS或用JS ？

Answer 1

您可以为此使用弹性框。尝试 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .

Answer 2

Codepen

您可以将 clamp() 与 relative 定位相结合。您可能需要稍微调整一下值以使其美观，但这是核心概念。

:root {
  --cardWidth: 200px;
  
  --min: calc(var(--cardWidth) / 8);
  --var: 7.5vw;
  --max: calc((var(--cardWidth) / 4) * 7);
  
  --overlap: clamp(
    var(--min),
    var(--var),
    var(--max)
  );
}

body {
  display: grid;
  place-items: center;
  margin: 0;
}

.w {
  display: flex;
}

[class*=card] {
  height: 300px;
  width: var(--cardWidth);
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px -1px #000;
}

.card-2 {
  position: relative;
  left: calc((var(--cardWidth) * -1) + var(--overlap));
}

<div class="c"></div>

<div class="w">
  <div class="card"></div>
  <div class="card-2"></div>
</div>

如何在屏幕变窄时将元素靠得更近？

How to bring elements closer together as the screen narrows?

javascript

css

margin

overlap

responsive-design

Codepen