Question

我正在尝试使用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函数后

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

参考

Answer 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>

可能是因为您插入了额外的右括号。这段代码可以正常工作。

CSS网格未对齐

1 个答案: