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值。但是这个问题也存在两个问题，我想解决这个问题：

每行的项目编号是固定的（如示例中的20）。我希望项目编号类似于“Math.floor”值，其中有多少可以适合。例如，如果项目宽度设置为75像素，如果页面宽度为800像素，则项目计数应为10（因为750像素是800像素宽度可以覆盖的最大值。）所以它应该是{ {1}}
每行底部有一个间隙，我不知道是什么原因引起的。

我主要是寻找一种仅限css的解决方案 - 但也接受了一个聪明且无故障的js。

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

Answer 1

您可以在Flex - controlling the last row

中查看潜在答案

至于你的第二个问题：

2）每行底部都有一个间隙，我不知道是什么原因引起的。

这是由块内的图像引起的。如果添加'vertical-align'顶部/中间/底部，则间隙消失。

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%;
}

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

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%;
}

适合内容（100％），具体取决于一行中的项目数

3 个答案: