Question

我试图达到这样的目标：

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

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

我怎样才能做到这一点？

谢谢！

编辑：好的，有些人指着我在搜索中找不到的帖子。根据{{3}}的最高投票回答，我实现了我想要的目标。它适用于我在我的div中使用img的时候。但就我而言，我的div里面有div。像这样：

＆＃13;

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

＆＃13;

在我的例子中，包装器只生成一列，而不像它只是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>

HTML表格列数响应窗口宽度

1 个答案: