Question

我希望box2完全可见，但box2中的框会在移动视图中显示它。我不希望container 2中的框的大小有任何不同我只想将body { margin: 0; width: 100%; } .container { width: 100%; height: 100vh; background-color: rgb(152, 152, 152); } .container-2 { width: 100%; height: 100vh; background-color: rgb(46, 6, 6); } .box-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; height: 100%; } .box1 { background-color: rgb(65, 186, 186); width: 50%; height: 100%; } .box2 { background-color: rgb(92, 191, 124); width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; } @media (max-width: 600px) { .box1 { background-color: rgb(65, 186, 186); width: 100%; height: 50%; } .box2 { background-color: rgb(92, 191, 124); width: 100%; height: 50%; } }推下来，以便在移动设备中完全可见。

＆＃13;

<body>

  <div class="container">
    <div class="box-container">
      <div class="box1">

      </div>
      <div class="box2" id="box">
        <div class="box1" style="background-color: blue; height: 50%;"></div>
        <div class="box1" style="background-color: green;  height: 50%;"></div>
        <div class="box1" style="background-color: yellow;  height: 50%;"></div>
        <div class="box1" style="background-color: orange; height: 50%;"></div>
      </div>
    </div>
  </div>
  <div class="container-2">
  </div>
</body>

</html>

＆＃13;

PATH=python/path:$PATH app

＆＃13;

Answer 1

您的问题是因为您在height:50%内设置了.box1至#box的内联CSS设置，其垂直（在移动视图中）总计为200%因此涵盖{ {1}}，因此请在移动视图中设置为.container-2

＆＃13;

25%

＆＃13;

body {
  margin: 0;
  width: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(152, 152, 152);
}
.container-2 {
  width: 100%;
  height: 100vh;
  background-color: rgb(46, 6, 6);
}
.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.box1 {
  background-color: rgb(65, 186, 186);
  width: 50%;
  height: 100%;
}
.box2 {
  background-color: rgb(92, 191, 124);
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#box .box1 {
  height: 50%
}
#box .box1:nth-child(3n+1) {
  background: blue
}
#box .box1:nth-child(n+2):nth-child(-n+3) {
  background: red
}
@media (max-width: 600px) {
  #box .box1 {
    height: 25%
  }
  .box1 {
    background-color: rgb(65, 186, 186);
    width: 100%;
    height: 50%;
  }
  .box2 {
    background-color: rgb(92, 191, 124);
    width: 100%;
    height: 50%;
  }
}

＆＃13;

如何让一个容器在移动视图中推送另一个容器？

1 个答案: