Question

我在php中有一系列图像，我试图将其显示为图库。它工作得很好，除了画廊的第一行是对角线，每张图像略低于它之前的图像。

以下是我正在使用的代码：

CSS

.gallery {
      margin: 5px;
      border: 1px solid #ccc;
      float: left;
      display: inline;
      width:180px;
      height:180px;
    }

    .gallery:hover {
        border: 1px solid #777;
    }

    .gallery img {
        max-height:100%;
        max-width:100%;
        margin:0 auto;
    }

HTML / PHP

<div class="gallery-container">
<?php
    $count = 0;
    foreach($images as $image) {
        echo "<div class='gallery'><a href=''><img src='".$dir.$image."'/></a></div>"; //$dir is the path to the image
        if(count % 4 == 0) {
            echo "<br>";
        }
        $count = $count + 1;
    }
?>
</div>

以下是第一行结果的屏幕截图：

所有其他行都很好。非常感谢您的帮助。

Answer 1

而不是 br 元素渲染＆＃34;清除＆＃34;格

<div style="clear:both"></div>

Answer 2

检查生成的html。很可能你的数量是关闭的，并且br经常被放到dom中。这个fiddle表明你想要的html和css应该有用。

<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<div class='gallery'><a href=''><img src='https://upload.wikimedia.org/wikipedia/commons/b/b2/Hausziege_04.jpg'/></a></div>
<br>

虽然，我会考虑不使用br，而是使用包含div：

喜欢this

Answer 3

您是否尝试过将计数设为1而不是0？

Answer 4

如果你想使用float来做，最好这样做：

<强> CSS

.gallery{
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  display: block;
  width:180px;
  height:180px;
}
.gallery.clear-left{
  clear: left;
}

<强> PHP / HTML

<div class="gallery-container">
<?php
    $count = 0;
    foreach( $images as $image ){?>
        <div class="gallery <?php echo( 0 == $count % 4 ? 'clear-left' : '' );?>">
            <a href="">
                <img src="<?php echo $dir.$image;?>">
            </a>
        </div>
    <?php
        $count++;
    }
?>
</div>

但是有一个更好的解决方案，名为 flex ：

CSS：第一排图像库出来对角线？

4 个答案: