Question

我有一个php脚本，可以在数据库中查询图像，然后使用foreach循环将图像输出到屏幕上。所有图像都具有相同的宽度，但高度不同。我想在2列中显示这些图像。 foreach循环意味着我无法在html中明确定义两列并将图像放入列中。正如我现在在网站上看到的那样，每个图像都向左浮动，但这会在不同高度的图像之间产生尴尬的垂直空间。

不确定我是否正在解释这一点，so here's a jsfiddle that shows what I have now and what I want it to look like.在这里，我已经对每个项目进行了编码，使其看起来正确，但是当它存在时，我不会知道每个图像的高度或者能够改变它。

如果有一种方法可以直接在html中放置两列，则需要像这样输出图像，这对于列中的循环是违反直觉的：

1 2

3 4

不是

1 3

2 4

理想情况下，我不需要使用一些奇怪的PHP或javascript解决方法，而是只能编辑图像框的CSS

.img_box {
  float: left;
  width: $img-width;
  max-height: 600px;
  padding: 0px 0px 0px 20px;
  margin-top: 20px;
}
.rate_img {
  width:$img-width;
}

从数据库中提取图像信息后

php

foreach ($result as $row) {
    echo '
     <div class="img_box">
        <a href="' . $row['file_loc'] . '"rel="lightbox[main]" title="' . $row['name'] . '" >
            <img src="' . $row['file_loc'] . '" class="rate_img" />
        </a>
     </div>';

Answer 1

我认为仅仅通过html和css获得你想要的效果是不可能的。

要填充可用的空白区域，您需要使用类似javascript的内容，请查看jQuery Masonry plugin的示例（可能还有jQuery-less选项......）。

将图像浮动到2列而不显式定义html中的列

1 个答案: