根据行中的项目数量调整内容（100％） [英] Fit content (100%) depending on number of items in a row

问题描述

我一直在努力制作一个自动适合内容（ width：100％）的图片库，具体取决于它包含的项目数。

I've been struggling to make an image gallery which auto-fits the content (width: 100%) depending on the number of items it contains.

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

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

当您扩展浏览器时，由于项目设置为 float：left 每行增加的项目数。

然而，画廊的宽度在页面右侧有间隙因为每个 .item 被定义为完全 75px 。

However then the width of the gallery has gap at the right side of the page since each .item is defined to be exactly 75px.

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

What I wanted would look closer to this: http://codepen.io/anon/pen/xGWKaP

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

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

As you can see items per row fit exactly to the page width as item width is defined as percentage instead of a fixed px value. However there are two issues with this one as well, which I want to solve:

1. 每行的项目号是固定的如在示例中）。我想要项目编号像一个 Math.floor 多少可以适合的值。例如，如果项目宽度设置为75像素，如果页面是800像素宽度，那么项目计数应该是10（因为750像素是最大，可以覆盖800像素宽度）因此它应该是 width：10％

1. Item number per row is fixed (20 as in the example). I want item number to be like a "Math.floor" value of how many can fit. For instance if the item width is set to be 75 pixels and if the page is 800 pixels width, then item count should be 10 (as 750 pixels is the max. that can be covered by 800 pixels width.) So it should be width: 10%

每行底部都有一个缺口，我不知道导致此。

There is a gap at the bottom of each row, I have no idea what causes this.

我主要寻找一个css解决方案 - 但一个聪明和无毛刺的js

I'm primarily looking for a css-only solution - but a clever and non glitching js is accepted as well.

这是一个很长的文章，希望一切清楚。

This is a long post, I hope everything is clear.

推荐答案

您可以在以下位置查看潜在答案： Flex - 控制最后一列

You can view a potential answer in: Flex - controlling the last row

至于您的第二个问题：

2 ）每行底部都有一个缺口，我不知道是什么原因导致的。

2) There is a gap at the bottom of each row, I have no idea what causes this.

块。如果您添加vertical-align顶部/中部/底部，则间隙消失。

This is caused by an image inside a block. If you add 'vertical-align' top/middle/bottom, then the gap disappears.

这篇关于根据行中的项目数量调整内容（100％）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！