javascript - 一组正方形的响应宽度和高度

Question

我正在创建一个 1:1 正方形的网格。用户可以继续添加正方形，我希望正方形的大小保持在它们的纵横比但相应地调整大小。棘手的部分是我希望正方形在页面上始终可见 - 也就是说没有滚动并且网页将响应宽度和高度。

我创建了一个示例，在测试时每秒添加一个正方形。但是，我无法让它与高度部分一起工作。我已经能够让它与宽度一起工作。

setInterval(() => {
  //  console.log(document.getElementsByClassName('square-container')[0]);
  document.getElementsByClassName('square-container')[0].innerHTML += ("<div class='square'></div>");
}, 1000);

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);
  margin: 5px;
  box-sizing: border-box;
  background: red;
  transition: background 1s;
}

.square::before {
  content: "";
  display: block;
  padding-top: 100%;
}

<div class="square-container">
  <div class="square"></div>
</div>

我没有使用任何 ui 库，如 bootstrap，仅使用 vanilla html、css 和 javascript。

Answer 1

使用 float 而不是换行。设置方形容器显示 block 。

<div>
<div id="square-container">
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
    <div id="square"></div>
</div>
</div>

#square-container{
  display: block
}
#square{
    float: left;
    height: 100px;
    width: 100px;
    background-color: orangered;
    margin: 1px;
}