在 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>

我的卡片排列得很好。但是当有太多溢出时，隐藏的、滚动条或任何设置的东西都会溢出。我不希望发生这种情况。我希望我的卡片尽可能多地重叠，以适应 space.

这是预期的行为：

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

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

Answer 2

我没有尝试 Neptotech 的建议，因为正如 Astrid 在主要问题的评论中指出的那样，有一个基于网格的解决方案不那么冗长，仅此而已：

.PlayersHand {
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    display: grid;
    width:100%;
    grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
}

grid-template 是我需要的核心内容。

在 CSS 和 bootstrap 的 blazor 上具有重叠 div 的灵活宽度

flexible width with overlaping divs on blazor with CSS and bootstrap

css

bootstrap-4

blazor

检查下面的代码片段

想法来自 here