0

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

不确定我是否解释得很好，所以这里有一个 jsfiddle，它显示了我现在拥有的东西以及我希望它看起来像什么。在这里，我对每个项目进行了编码，使其看起来正确，但是当它上线时，我不会知道每个图像的高度或能够更改它。

如果有办法将两列直接放在 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>';
4

1 回答 1

0

我认为仅在 html 和 css 中无法获得您想要的效果。

要填充可用的空白空间，您需要使用 javascript 之类的东西，例如查看jQuery Masonry 插件（可能还有 jQuery-less 选项......）。

于 2013-01-16T00:59:31.213 回答