CSS：如何将图像分成行？

我想创建一个包含多行图像的相册。目前，我的所有图像都显示在一行中。比如说，如果我上传15幅图片，将它们分成3行的CSS代码是什么。。每行5张图片？抱歉，这可能真的很容易，但我是CSS的初学者。这是我目前正在使用的代码

编辑：这里是代码的另一部分，我不确定它是否是一个容器

.flickr-photoset-img{ 
float: left; 
}

.flickr-photoset-box {
  padding: 10px;
  float: left;
  text-align: center;
  width: 130px;
  height: 130px;
}

---

最简单的方法是限制容器大小

.container {
   width: 500px; /* look i'm now showing 5 images per line */
}
.img {
  /* height: 100px; width: 100px; */
  float: left;
}

<div class="container">
  ...
  <img ...>
  <img ...>
  <img ...>
  <img ...>
  <img ...>
  <img ...> <!-- I will wrap to a new line -->
  ...
</div>

---

首先，你应该有一个包装你的图像

需要知道的重要一点是，如果图像宽度的总和超过其包装div的with，则图像将自动跳到下一行

例如，如果您有一个600px宽环绕div和四个图像，每个图像的宽度250px，它们将分为两行

---

您可以找到一个教程，它准确地解释了您需要为图库做什么。

您可以在第五幅图像后放置

标记。使用CSS，您可以添加如下样式

CSS

.images{
float:left
}

.clear{
clear:both
}


HTML

<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />

CSS
.图像{
浮动：左
}
.清楚{
清楚：两者都有
}
HTML

每个图像的宽度是多少？你的页面有什么问题？我怀疑你只能用CSS才能做到这一点。如果页面是动态的，您需要某种脚本来创建正确的标记，或者如果图像大小相同，您可以使容器足够宽，一行只能容纳5个图像并使其浮动。

img

s默认情况下为

display:inline

，因此，您需要执行

display:block

和

float:left

，每隔五次

img

，添加另一个类（

.imgBreak

可能），并将其设置为：

.imgBreak{clear:left；}

。例如：@JaredFarrish如果您将float添加到非none元素，则其显示参数数量有限，它是自动变异成的。看看这个规范，这样一个元素有

display:inline

和

float:（左|右）

有

display:block

自动这是假设你有相同大小和固定布局的图像。我不知道，我认为我的

clear:left

类非常简单，没有额外的标记。@rebus，是的，这是一个假设-但是对于一个“照片”画廊，有多个图像显示在一行中，我安全地假设这些是缩略图-可能大小相同（在横向与纵向的情况下，需要修改）@JaredFarrish没有额外的标记boss-我再次提供了一个容器可见的示例，以便OP可以看到我所做的-我打赌他的图像也在一个容器中。我不是说你错了。我也喜欢你的解决方案。我的方法只是解决问题的另一种方法。OP不够含糊，许多不同的解决方案都可以实现所需的输出。@rlemon同意，因为在我看来，相同大小容器宽度的图像是可行的（也比Jareds建议的更少类）.

不符合HTML将表单与表示分离的目的-除非您直接对其应用CSS规则，如

清除：两者都
。（在这种情况下，您可能将其应用于错误的元素。）这些规则只是为了让生活更轻松，而不是更困难。有时你不得不违反规则。
CSS

.images{
float:left
}

.clear{
clear:both
}


HTML

<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=clear ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />
<img class=images ... />