css - 使用 CSS 和 bootstrap 在 blazor 上实现具有重叠 div 的灵活宽度

Question

我的 UI 上有一手牌，我想允许容纳比 div 上实际容纳的更多的牌，必要时让它们重叠。

我的卡片使用 blazor 链接到数组，如下所示:

<div class="PlayersHand d-flex flex-row justify-content-center">
    @foreach(var card in Client.Game.Me.CardsInHand)
    {
        <CardViewer Card=card IsHandCard=true />
    }
</div>

我的卡片排列正确。但是，当太多时，溢出就会通过隐藏、滚动条或其他设置来启动。我不希望这种事发生。我希望我的卡片尽可能多地重叠，以适应空间。

这将是预期的行为:

Answer 1

检查下面的代码片段

:root {
  /*Variables,remove needed*/
  --bg-one: #973999;
  --bg-two: #f8598b;
  --bg-three: #f7bf00;
  --bg-panel: #ebebeb;
  --color-text: #999;
  --distance: 4rem;
  --height: 150px; /*OR Auto*/
  --width: 100px; /*OR Auto*/
}

body {
  /*You may remove this rule*/
  background-image: linear-gradient(
    to bottom right,
    var(--bg-one),
    var(--bg-two),
    var(--bg-three)
  );
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
}

.cards {
  display: flex; /*MAIN*/
}

.card {
  z-index: 1; /*MAIN*/
  background: var(--bg-panel); /*MAIN*/
  height: var(--height);
  max-width: var(--width);

  /*Styles(You may remove)*/
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 4px 4px 12px 2px rgba(0, 0, 0, 0.6);
}
.card p {
  /*You may remove this rule*/
  color: var(--color-text);
}

.card:not(:first-child) {
  margin-left: calc(var(--distance) * -1); /*MAIN*/
}

<div class="cards">
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
</div>

想法来自here

我已经编辑了上面链接中的代码，我不知道blazor，但我认为这会对你有所帮助，我已经评论了我的大部分代码。