Question

我一直试图创建一个简单的公告板，在其中可以查看不同的公告，图像和视频。每当我尝试以100％的宽度和高度显示视频内容时，我都会在DIV中遇到这个UI错误。

即使我插入了长消息或视频，我也不希望他们向上移动或保持在原位。

这是我正在谈论的示例图片

如您所见，我希望它们在插入视频后基本向上移动。

这是我使用的代码。

对于网格CSS，我使用了此

<style>
.grid-container {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1.75fr 1fr;
    grid-template-rows: 0.75fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "Logo . ." ". videos ." ". videos ." ". . ." ". . .";
}

.videos {
    grid-area: videos;
}

.Logo {
    grid-area: Logo;
}

.Welcome Text {
    grid-area: 1 / 2 / 1 / 2;
}

.Calendar {
    grid-area: 1 / 3 / 3 / 3;
}

.Posts {
    grid-area: 2 / 1 / 6 / 1;
}

.Schedule {
    grid-area: 3 / 3 / 6 / 3;
}

.Images {
    grid-area: 4 / 2 / 6 / 2;
}

并显示我使用的全部内容

   <div class="grid-container">
    <div class="videos">
        <div class="row">
            <div class="col-md-12" align="center">
                <div class="card border-success">
                    <div class="card-header bg-theme"><h4 style="color: white">Video Section</h4></div>
                    <div class="card-body">
                        <div>
                            <?php
                            $value = custom_query("SELECT * FROM tbl_upload_video ORDER by RAND() DESC LIMIT 1");
                            if($value->rowCount()>0)
                            {
                                while($row=$value->fetch(PDO::FETCH_ASSOC))
                                {
                                    $id = $row['id'];

                                    ?>
                                    <?php
                                    $img = substr($row['video_path'], 6); ?>
                                    <video id="videos" autoplay>
                                        <source src="<?= $img ?>" type="video/mp4">
                                    </video>
                                <?php }} ?>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="Logo" style="max-resolution: -50px;">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3>INFO BOARD</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="Welcome Text">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3 style="text-align: center">Welcome Students!!!!</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="Calendar">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3 style="text-align: center">Calendar and other things</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="Posts">
        <div class="col-md-12" align="center">
            <div class="card border-success">
                <div class="card-header bg-theme"><h4 style="color: white">Posts</h4></div>
                <div class="card-body">
                        <?php
                        $dn = datenow();
                        $value = custom_query("SELECT * FROM tbl_post WHERE date2 >= '$dn' AND type = 'Announcement' and status = 'Active' ORDER by id DESC");
                        if($value->rowCount()>0)
                        {
                        while($row=$value->fetch(PDO::FETCH_ASSOC))
                        {
                        $id = $row['id'];
                         $d2 = $row['date2'];
                         $d = $row['date'];
                        ?>
                        <div class="card mb-3" style="max-width: 50rem;">
                            <div class="card-header bg-warning"><?= $row['title']; ?></div>
                            <div class="card-body">
                               <?= $row['content']; ?>
                            </div>
                        </div>
                        <?php }} else {
                            echo "<h3>No Content Available</h3>";
                        } ?>
                </div>
            </div>
        </div>
    </div>
    <div class="Schedule">
        <div class="col-md-12" align="center">
            <div class="card border-warning">
                <div class="card-header bg-theme"><h4 style="color: white">Schedules</h4></div>
                <div class="card-body">
                    <?php
                    $dn = datenow();
                    $value = custom_query("SELECT * FROM tbl_post WHERE date2 >= '$dn' AND type = 'Schedule' and status = 'Active' ORDER by id DESC");
                    if($value->rowCount()>0)
                    {
                        while($row=$value->fetch(PDO::FETCH_ASSOC))
                        {
                            $id = $row['id'];
                            $d2 = $row['date2'];
                            $d = $row['date'];
                            ?>
                            <div class="card mb-3" style="max-width: 50rem;">
                                <div class="card-header bg-success"><?= $row['title']; ?></div>
                                <div class="card-body">
                                    <?= $row['content']; ?>
                                </div>
                            </div>
                        <?php }} else {
                        echo "<h3>No Content Available</h3>";
                    } ?>
                </div>
            </div>
        </div>
    </div>
    <div class="Images">
        <div class="col-md-12" align="center">
            <div class="card card-accent-theme ">
                <div class="card-body">
                    <h3 style="text-align: center">Images</h3>
                </div>
            </div>
        </div>
    </div>

非常感谢您：）

Answer 1

我已经解决了这个问题。我没有使用CSS GRID，而是使用div和col

还原为引导网格

插入视频后更改Div布局

1 个答案: