CSS网格不对齐

问题描述 投票:1回答:1

我正在尝试使用CSS Grid创建一个简单的页面。在使用MySQL插入php函数之前,结果非常好。

CSS

.thumbnail
{
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 5px;
    width: 350px;
}

HTML / PHP

<div class="container text-center">
    <br>
    <div class="item col-lg-4">
        <div class="thumbnail">
            <br>
            <?php if ($fetch['file_name'] == '') { ?>
                <img class="img-fluid" src="../images/missing.png" alt="Sample image" style="height:150px; width:150px;">
            <?php } else { ?>
                <img class="img-fluid" src="../images/<?php echo $fetch['file_name']; ?>" alt="missing.png" style="height:150px; width:150px;"/>
            <?php } ?>

            <div class="caption">
                <h4><?php echo $fetch['school_name']; ?></h4>
                <p><?php echo $fetch['email']; ?></p>
                <p class="lead">$21.000</p>
                <a class="btn2" href="profileorg.php?Org_ID=<?php echo $fetch['Org_ID'] ?>">View profile</a>
            </div>
        </div>
    </div>
    <?php } ?>
</div>

屏幕截图如下

这是我的问题:

插入php函数后 After inserting php function

我想要的是这样的网格对齐:

参考 Reference

php html css mysql
1个回答
1
投票
    <div class="container text-center">
    <br>
    <div class="item col-lg-4">
        <div class="thumbnail">
            <br>
            <?php if ($fetch['file_name'] == '') { ?>
                <img class="img-fluid" src="../images/missing.png" alt="Sample image" style="height:150px; width:150px;">
            <?php } else { ?>
                <img class="img-fluid" src="../images/<?php echo $fetch['file_name']; ?>" alt="missing.png" style="height:150px; width:150px;"/>
            <?php } ?>

            <div class="caption">
                <h4><?php echo $fetch['school_name']; ?></h4>
                <p><?php echo $fetch['email']; ?></p>
                <p class="lead">$21.000</p>
                <a class="btn2" href="profileorg.php?Org_ID=<?php echo $fetch['Org_ID'] ?>">View profile</a>
            </div>
        </div>
    </div>
</div>

可能是因为你插入了额外的关闭括号。这段代码可以正常使用。

© www.soinside.com 2019 - 2024. All rights reserved.