Question

我想创建一个包含多行图片的相册。目前我的所有图像都出现在一行中。假如我上传了15张图片，将它们分成3行的CSS代码是什么。每行5张图片？对不起，这可能很容易，但我是CSS的初学者。这是我目前使用的代码。

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

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

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

Answer 1

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

.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>

Example here

关于Flicker和Drupal的简要之后 - 我认为您要编辑的css类是flickr-photoset

.flickr-photoset {
   width: 500px; /* really you can set this to whatever */
}

Answer 2

首先，你应该有一个div包裹你的图像。

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

例如，如果您有一个 600px 宽的包装div和四个图像，每个图像的宽度 250px ，它们将在列成两行。

Here您可以找到一个教程，准确说明您需要为您的图库做些什么。

Answer 3

您可以在第五张图片后放置<br />标记。使用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：如何将图像分成行？

3 个答案: