HTML表格列数响应窗口宽度

Question

我正在尝试实现这样的目标：

我有从数据库中获取的可变数量的数据。我想将收到的每个数据放入一个单元格中，并将每个单元格并排放置。在这一点上我可以达到。你可以想到一个图鉴。每个口袋妖怪信息都进入一个单元格（数字、图像、名称）。

我的问题是：每个单元格都有固定的宽度，例如 100 像素。我希望我的表根据窗口大小创建尽可能多的列。例如：如果用户窗口有 1345 像素，我的表格将每行创建 13 个单元格。但我希望它能够实时响应：如果用户将他/她的窗口大小调整为 890 像素，我的表格现在每行只有 8 个单元格。

我怎样才能做到这一点？

谢谢！

编辑：好的，有人指出我在搜索中找不到的帖子。遵循this post 的最高投票答案，我有点实现了我想要的。当我在我的 div 中使用 img 时，它可以工作。但就我而言，我的 div 中有 div。像这样的：

<div class="wrapper">
  <div>
    <p>some text</p>
    <img src="myimagepath.png" />
    <p>more text</p>
  </div>
</div>

在我的示例中，包装器只制作 1 列，而不是像只有 img 时那样分布到整个页面。我该如何解决这个问题？

PS：我不知道我应该继续回答帖子上的线程还是继续这里。请让我知道，以便我们关闭此线程并在正确的线程上解决。

Answer 1

也许是这样的？

.pokedex {
  display: flex;
  flex-wrap: wrap;
}

.pokedex div {
  background: aquamarine;
  height: 100px;
  margin: 0 1px 1px 0;
  text-align: center;
  width: 100px;
}

p {
  font-size: 12px;
  margin: 3px;
}

img {
  width: 50px;
}

<div class="pokedex">
  <div>
    <p>Pokemon 1</p>
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png">
    <p>Bulbasaur</p>
  </div>
  <div>
    <p>Pokemon 2</p>
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/002.png">
    <p>Ivysaur</p>
  </div>
    <div>
    <p>Pokemon 3</p>
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/003.png">
    <p>Venusaur</p>
  </div>
    <div>
    <p>Pokemon 4</p>
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png">
    <p>Charmander</p>
  </div>
    <div>
    <p>Pokemon 5</p>
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/005.png">
    <p>Charmeleon</p>
  </div>
    <div>
    <p>Pokemon 6</p>
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/006.png">
    <p>Charizard</p>
  </div>
    <div>
    <p>Pokemon 7</p>
    <img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/007.png">
    <p>Squirtle</p>
  </div>
</div>