儿童包裹后，父块不会缩小

Question

它看起来像什么：

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

但是我希望看到这个而不使用FLEXBOX ：

这是codepen

CODE：

#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。

更改了您的值以使其响应

＆＃13;

＆＃13;

*,
*::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)
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个，

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

Answer 3

以下是使用媒体查询codepen

的解决方案

＆＃13;

＆＃13;

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

@media screen and (max-width: 920px) {
  #two {
    width: 600px;
  }
}
@media screen and (max-width: 600px) {
  #two {
    width: 300px;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;