html - 父容器空间不足时如何实现一定的重叠布局？

Question

我有<div class="parent" style="position: relative; width: 100%; height: 25vh;">...</div>其中包含一定数量的 <div class="child"></div>元素(它们的数量因子页面而异)。如您所见 .parent 的大小已知但不固定。 .child大小固定为例如100px x 170px .

当.parent 中的所有 child 都有足够的空间时，我想将它们一个接一个地逐行放置(例如 float: left; 很容易):

但是当 child 太多的时候.parent ，我希望将多余的元素放在其他元素的“上方”，偏移量很小(这样我们就可以看到它们下方有一些东西 - 有点类似于耐心纸牌游戏):

请注意顺序，那些过多的元素不必位于任何“层”/z-index 上，它们应该只是与它们之前的 div 重叠。

此外，没有固定数量的每行卡片，因为.parent宽度为 100%客户端宽度。

如何使用 CSS 实现这种行为，没有 JavaScript(我知道我可以根据 child 在 JavaScript 中的索引计算绝对 x/y)？

Answer 1

我相信我找到了一个可能适合您的纯 CSS 解决方案。据我了解，您是 Parent Div 容器和代表卡片的随机数量的子 div。

免责声明:我为此使用像素来展示概念证明，但如果您计算出所有百分比，也可以达到相同的效果.

基本 HTML 布局

// I am using the <!-- comments --> to remove whitespace between divs
// This is important because we don't want to being floating elements
// So each pixel is going to count
<div class="parent">
     <div class="child">card 1</div><!--
  --><div class="child">card 2</div><!--
  --><div class="child">card 3</div><!--
  --><div class="child">card 4</div><!--
  --><div class="child">card 5</div><!--
  --><div class="child">card 6</div>
</div>

出于演示目的，我将卡片制作为 100 像素乘 150 像素的漂亮卡片。在我看来，这有助于视觉化数学。这是我们需要布置字段的基本 CSS。

CSS

// normalize div elements
*{ box-sizing: border-box; margin: 0; padding: 0; }

.parent{
  position: relative;
  width: 480px; //4 cards wide with 10px of margin on each side (4*100)+(4*20)
  background: blue;
  height: 340px;
  overflow:hidden;
  margin: 0px auto;
}
.child{
  position: relative;
  width: 100px;
  height: 150px;
  border:1px solid #000;
  background: #333;
  color: white;
  margin: 10px;
  display: inline-block;
}

现在网格已经设置好了，我们只需要将第三行和第四行向上移动。

CSS 的一大优点是您可以将样式应用于页面上可能不存在的元素。使用 nth-child 选择器将帮助我们定位这些未知元素。

MOAR CSS

.child:nth-child(n+9){
  // move cards from their origin up 330px and left 5px
  transform: translateY(-330px) translateX(-5px);
}

您唯一需要做的就是创建足够的规则来匹配您可能拥有的多种结果。

示例:我需要支持 18 张卡片的可能性。只需添加另一条规则!

.child:nth-child(n+17){
  // all we have to do is double the increments
  transform: translateY(-660px) translateX(-10px);
}

希望对您有所帮助。

Working JSFiddle