适合内容 (100%) 取决于一行中的项目数

Question

我一直在努力制作一个能够根据包含的项目数量自动适应内容 (width: 100%) 的图片库。

这就是我的意思： 假设这是我的画廊： http://codepen.io/anon/pen/eNMOEz

.item {
  width: 75px;
  height: 75px;
  border-width: 1px;
  float: left;
}

当您缩放浏览器时，由于项目设置为float: left，因此每行的项目数会增加。

但是，画廊的宽度在页面右侧有间隙，因为每个.item 都被定义为恰好75px。

我想要的看起来更接近这个： http://codepen.io/anon/pen/xGWKaP

.item {
  width: 5%;
  float: left;
}

您可以看到每行的项目完全适合页面width，因为项目宽度定义为百分比而不是固定的 px 值。但是，这个也有两个问题，我想解决：

1. 每行的项目数是固定的（在示例中为 20）。我希望项目编号像“Math.floor”值，表示可以容纳多少。例如，如果项目宽度设置为 75 像素并且页面宽度为 800 像素，则项目计数应为 10（因为 750 像素是 800 像素宽度可以覆盖的最大值。）所以它应该是 @ 987654333@

2. 每行底部有一个空隙，我不知道是什么原因造成的。

我主要是在寻找一个纯 css 的解决方案 - 但也可以接受一个聪明且无故障的 js。

这是一个很长的帖子，我希望一切都清楚。

Answer 1

您可以在以下位置查看潜在答案：Flex - controlling the last row

关于你的第二个问题：

2) 每行底部都有一个空隙，我不知道是什么原因造成的。

这是由块内的图像引起的。如果添加 'vertical-align' top/middle/bottom，那么间隙就会消失。

Answer 2

Flexbox 对您更有用。它将允许您进行您在帖子中要求的调整。

在这里查看一个很棒的教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

试试看：

.item {
    width: 10vw;
    height: 10vw;
    border-width: 1px;
    float: left;
} 

或者它（如果存在滚动条）：

body {
  margin: 0;
  padding: 0;
  font-size:0px;
}
.item {
  width: 5%;
  height: auto;
  /*border-width: 1px;*/
  float: left;
}
img {
  width: 100%;
}

试试这个，如果你想连续显示所有图像（真的我不完全理解，因为英语不是我的母语，你应该注意这一点，因为我写得不好，并解释一下 ¬¬）

html,body {
  margin: 0;
  padding: 0;
  font-size:0px;
  width:100%;
}
#wrap {
  display:inline-table;
  overflow:hidden;
  width:100%;
  height:auto;
}
.item {
  display:table-cell;
  height:10px;
}
img {
  width: 100%;
}