发现很难使堆叠的 div 响应

Question

.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)position:absolute 左增量。但是，如果我使用负边距，第二行的 div 会溢出。如果我用position:absolute，容器小的时候，div也会溢出。我怎样才能使堆叠的 divs 响应？我可以让它响应 100 div 秒吗？

Answer 1

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

.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 响应

Found it hard to make stacked divs responsive

css

responsive-design

responsive