发现很难让堆叠的 div 响应答案

【问题标题】：Found it hard to make stacked divs responsive发现很难让堆叠的 div 响应
【发布时间】：2019-03-16 00:02:49
【问题描述】：

.container{
  border: 1px solid black;
  width: 13em;
  
}
.animal:nth-child(n+2){
  margin-left: -5em;
}
.animal{
  width: 6em;
  height:6em;
  display: inline-block;
  background: yellow;
  border: 1px solid black;
  border-radius: 6px;
}

.container2{
  border: 1px solid black;
  width: 14em;
  height: 120px;
}

.animal1,.animal2,.animal3,.animal4,.animal5,.animal6,.animal7,.animal8{
  width: 6em;
  height: 6em;
  background: yellow;
  border: 1px solid black;
  border-radius: 6px;
  display: inline-block;
}

.animal1{
  position: absolute;
  left: 1em;
}
.animal2{
  position: absolute;
  left: 3em;
}
.animal3{
  position: absolute;
  left: 6em;
}
.animal4{
  position: absolute;
  left: 9em;
}
.animal5{
  position: absolute;
  left: 12em;
}
.animal6{
  position: absolute;
  left: 15em;
}
.animal7{
  position: absolute;
  left: 18em;
}
.animal8{
  position: absolute;
  left: 21em;
}

<html>
  <body>
    <h2>Case1</h2>
    <div class="container">
      <div class="animal">Dog</div>
      <div class="animal">Cat</div>
      <div class="animal">Mouse</div>
      <div class="animal">Duck</div>
      <div class="animal">Fish</div>
      <div class="animal">Fish</div>
      <div class="animal">Fish</div>
      <div class="animal">Fish</div>
      <div class="animal">Mouse</div>
      <div class="animal">Cat</div>
    </div>
    <br><br>
    <h2>Case2</h2>
    <div class="container2">
      <div class="animal1">Dog</div>
      <div class="animal2">Cat</div>
      <div class="animal3">Mouse</div>
      <div class="animal4">Duck</div>
      <div class="animal5">Fish</div>
      <div class="animal6">Fish</div>
      <div class="animal7">Fish</div>
      <div class="animal8">Fish</div>
    </div>
  </body>
</html>

有一些 div 相互堆叠。我以两种方式实现堆栈：（1）负边距，和（2）位置：绝对，左增量。但是，如果我使用负边距，第二行中的 div 会溢出。如果我使用 position:absolute，当容器很小时，div 也会溢出。如何使堆叠的 div 响应？我可以让它响应 100 个 div 吗？

【问题讨论】：

您使用的是固定像素宽度。您是否尝试过使用百分比宽度，例如 width: 10%;？固定像素宽度不会响应。使用百分比宽度后，取出负边距。
我把 px 换成了 em。

标签： css responsive-design responsive

【解决方案1】：

CSS-Grid 解决方案可能适合您。

.container {
  border: 1px solid black;
  width: 13em;
  display: grid;
  grid-template-columns: repeat(4, 2em); /* Tweak me! */
}

/* A random media query */
@media (min-width: 1200px) {
  .container {
    width: 26em;
    grid-template-columns: repeat(8, 2em);
  }
}

.animal {
  width: 6em;
  height: 6em;
  display: inline-block;
  background: yellow;
  border: 1px solid black;
  border-radius: 6px;
}

<div class="container">
  <div class="animal">Dog</div>
  <div class="animal">Cat</div>
  <div class="animal">Mouse</div>
  <div class="animal">Duck</div>
  <div class="animal">Fish</div>
  <div class="animal">Fish</div>
  <div class="animal">Fish</div>
  <div class="animal">Fish</div>
  <div class="animal">Mouse</div>
  <div class="animal">Cat</div>
</div>

根据您的需要调整 grid-template-columns。

为了提高响应能力，只需在您的媒体查询中更改它即可。我已经在上面的例子中证明了这一点。

【讨论】：

完美答案。你知道如何使堆叠的 div 居中吗？右边有一点空白。
我不知道这是否可能。您可以调整容器的宽度以减少空白。