Question

我正在尝试建立图片库，但它显示出一些奇怪的行为。在我的情况下，第一行填充了3张图片，而第二行则跳过了两列，一个填充了图片，与第三行相同。

HTML代码：

<div class="container gallery-container">
    <p class="page-description text-center">Snaps by attendies</p>
    <div class="tz-gallery">
        <div class="row">
            <?php if($images): ?>
            <?php foreach($images as $Image) : ?>    
                <div class="col-sm-6 col-md-4">
                    <a class="lightbox" href="<?php echo Image['path'];?>">
                        <img src="<?php echo Image['path'];?>" alt="Benches">
                    </a>
                    <p><?php echo Image['description']; ?></p>    
                </div>
            <?php endforeach; ?>
            <?php else: ?>
                No images yet uploaded!
            <?php endif; ?>
        </div>    
    </div>    
</div>

Answer 1

如果您使用的是bootstrap，请尝试以下代码：

<div class="container">
    <div class="card-columns">
        <?php if(isset($images)) { ?>
            <?php foreach($images as $Image) { ?>
            <div class="card">
                <a href="<?php echo $Image['path'];?>">
                    <img class="card-img-top" src="<?php echo $Image['path']; ?>" alt="Card image cap">
                </a>
                <div class="card-body">
                    <h5 class="card-title"><?php echo $Image['description']; ?></h5>
                </div>
            </div>
            <?php } ?>
        <?php } else { ?>
            No images yet uploaded!
        <?php } ?>
    </div>
</div>

Answer 2

赋予图像高度

                <img class="card-img-top" src="<?php echo $Image['path']; ?>" style="height: 300px;" alt="Card image cap"> </a>

画廊图像显示出奇怪的行为？

2 个答案: