html - child 包裹后父 block 不会收缩

Question

它的样子:

当我减小浏览器的窗口大小时，我得到:

但我希望它看起来像这样不使用 FLEXBOX:

这是 codepen

代码:

#one {
  background-color: grey;
  text-align: center;
}
#two {
  display: inline-block;
  text-align: left;
  padding: 10px;
  background-color: lightgrey;
}
.square {
  display: inline-block;
  width: 300px;
  padding-bottom: 300px;
  background-color: black;
}

<div id="one">
  <div id="two">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>

Answer 1

如果不使用 Flexbox，您需要使用 @media queries。

更改您的值以使其响应

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
#one {
  background-color: grey;
  max-width: 900px;
  margin: 0 auto;
  font-size: 0 /* inline-block gap fix */
}
#two {
  padding: 10px;
  background-color: lightgrey;
}
.square {
  display: inline-block;
  width: calc((100% / 3) - 10px);
  padding-bottom: 300px;
  background-color: black;
  margin:5px
}
@media (max-width: 768px) {
  .square {
    width:calc((100% / 2) - 10px)
  }
}

<div id="one">
  <div id="two">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>