显示新记录时，PHP SQL 显示在预期 div 之外

【问题标题】：PHP SQL displaying outside of intended div when new record is displayed显示新记录时，PHP SQL 显示在预期 div 之外
【发布时间】：2022-01-17 14:10:04
【问题描述】：

我有一个网站，用户可以在其中发布图片以及有关该图片的其他一些信息。我有一个侧边栏供用户导航到我网站特定一侧的其他部分。

看起来它显示在div 之外，我打算并设想所有帖子都在下面，值得一提的是，在每个新帖子中，它在原来的预期位置之外越来越远，直到到达@ 987654328@.

这就是我的意思。屏幕截图是网站的缩小屏幕截图。

下面是容器的代码，其中包含我所有的标签和帖子代码，上面是“答案键”标题，以及它右侧的按钮拉出的发布模式。下面是将用户输入到模式中的所有信息发送到数据库的 php。为轻微的混乱道歉。

        <div id="container" class="row">
        
            <div class="tab col-sm-3 border border-end-0 border-start-0" id="sidenav">
                <ul style="list-style-type:none;padding:0;margin:0;" class="text-end" id="menu">
                    <li>
                        <a class="tablinks">Home</a>
                    </li>
                    <li>
                        <a class="tablinks">Calculators</a>
                    </li>
                </ul>
            </div>
            
            <div id="entirepost" class="col-sm-9">
                <?php   
                    $query = mysqli_query($conn,"SELECT *,UNIX_TIMESTAMP() - sub_date_created AS TimeSpent from submission LEFT JOIN user on user.user_id = submission.sub_user_id order by submission_id DESC")or die(mysqli_error());
                    while($submission_row=mysqli_fetch_array($query)){
                        $id = $submission_row['submission_id']; 
                        $upid = $submission_row['sub_user_id']; 
                        $posted_by = $submission_row['firstname']." ".$submission_row['lastname'];
                ?>
                <div id="posts">
                
                    <?php
                        if((isset($_SESSION['role']) && $_SESSION['role'] == "admin")){
                            echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>&times;</b></a>";
                        }
                        elseif((isset($_SESSION['role']) && $_SESSION['role'] == "developer")){
                            echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>&times;</b></a>";
                        }
                        elseif((isset($_SESSION['user_id']) && $_SESSION['user_id'] == $upid)) {
                            echo "<a style='float:right; font-size: large;' class='btn btn-outline-danger' href='deletesubmission.php?id=" . $id . "'><b>&times;</b></a>";
                        }
                        else {
                            echo "";
                        }
                    ?>
                    
                    <h3><?php echo $submission_row['sub_title']; ?></h3>
                    <h5>
                        <?php echo "<span class='badge rounded-pill' id='grade" . $submission_row['grade'] . "Flare'>" . $submission_row['grade'] . " Grade</span>"; ?> 
                        <?php echo $submission_row['teacher']; ?> · <?php echo $submission_row['subject']; ?><br>
                    </h5>
                    <img id="uploadedImage" src="<?php echo "images//" . $submission_row['image_url'] ?>"/>
                    <p>
                        <?php echo $submission_row['sub_content'];?>
                        <!-- </?php echo "images//" . $submission_row['image_url'] ?><br> -->
                        <table id="submissionInfoTable">
                            <thead>
                                <tr>
                                    <th width="25%">Assigned</th>
                                    <th>Due</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><i><?php echo date('F d, Y', $submission_row['assigned']) ?></i></td>
                                    <td><i><?php echo date('F d, Y', $submission_row['due']) ?></i></td>
                                </tr>
                            </tbody>
                            <tbody>
                                <tr>
                                    <td colspan="2">
                                        <?php echo "<b>" . $submission_row['weight'] . "%</b> of your grade"; ?> 
                                        <i style="color:grey" class="bi bi-info-circle" data-bs-toggle="tooltip" title="Assignments may weigh differently depending on the teacher's grading system and how many other assignments are under this weight"></i>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </p>

                    <small> 
                    <i> 
                        <?php echo $posted_by; ?>
                    </i>
                    <?php
                        if((isset($_SESSION['role']) && $_SESSION['role'] == "admin")){
                            echo "<span class='badge bg-primary'>Admin</span>";
                        }
                        elseif((isset($_SESSION['role']) && $_SESSION['role'] == "developer")){
                            echo "<span class='badge bg-primary'>Dev</span>";
                        }
                        else {
                            echo "";
                        }
                    ?> ·
                        <?php               
                                $days = floor($submission_row['TimeSpent'] / (60 * 60 * 24));
                                $remainder = $submission_row['TimeSpent'] % (60 * 60 * 24);
                                $hours = floor($remainder / (60 * 60));
                                $remainder = $remainder % (60 * 60);
                                $minutes = floor($remainder / 60);
                                $seconds = $remainder % 60;
                                if($days > 0)
                                    echo date('F d, Y - H:i:sa', $submission_row['date_created']);
                                elseif($days == 0 && $hours == 0 && $minutes == 0)
                                    echo "A few seconds ago";       
                                elseif($days == 0 && $hours == 0)
                                    echo $minutes.' minutes ago';
                                elseif($days == 0 && $hours == 1)
                                    echo $hours.' hour ago';
                                elseif($days == 0 && $hours > 1)
                                    echo $hours.' hours ago';
                        ?>
                    </small>
                    <hr>
                </div>
                <br>
            </div>
            <?php
            }
            ?>
            &nbsp;
        </div>

#content {
    margin: 20px;
}

#postcontent {
    resize: none;
    outline: none;
    border: 1px solid rgb(192, 192, 192);
    transition: all 0.5s ease;
    border-radius: 16px;
    padding: 10px;
    width: 100%;
    margin-top: 15px;
}

#postcontent:focus {
    border: 1px solid #5865F2;
}

#entirepost {
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    /* border-radius: 5px; */
    padding: 20px;
    /* width:auto; */
}

#commentstextarea {
    resize: none;
    outline: none;
    border: 1px solid gray;
    transition: all 0.5s ease;
}

#commentstextarea:focus {
    border: 1px solid #5865F2;
}

#comments {
    margin-top: 10px;
}

#commentcontent {
    margin-top: 1%;
    padding-left:10px;
    border-left: 3px solid #ccc;
    width: 50%;
}

#commentstitle {
    margin-left: 1%;
    margin-top: 2%;
}

#title {
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    margin-bottom: 12px;
    outline: none;
    border-radius: 16px;
    background-color: transparent;
    border: 1px solid rgb(192, 192, 192);
    color: black;
    transition: all 0.5s ease;
}

#title:focus {
    border: 1px solid #5865F2;
}

#header {
    padding:5px;
}

#NewSubmission {
    background-color: transparent;
    color: #3d4cf3;
    border: 1px solid #a3a9f5;
}

#NewSubmission:hover {
    background-color:#a3a9f5;
}

#PageTitle {
    width:40%;
    display: inline;
}

#container {
    width: 100%;
    padding-right: 0;
}

#sidenav {
    padding-right: 0;
}

.tab {
    float: left;
    background-color: #f1f1f1;
    transition: all 0.3s ease;
    height: 100%;
}

.tab button, .tab a {
    display: block;
    text-decoration: none;
    background-color: inherit;
    color: black;
    padding: 22px 16px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    transition: all 0.3s ease;
}

.tab button:hover, .tab a:hover {
    background-color: #ddd;
    transition: all 0.3s ease;
}

.tab button.active, .tab a:hover {
    background-color: #ccc;
    transition: all 0.3s ease;
}

#search {
    transition: all 0.3s ease;
    width: 100%;
    padding: 1%;
    margin: 1%px;
    outline: none;
    border: none;
    background-color: rgb(231, 230, 230);
}

.select2, input {
    margin-top: 10px;
}

.select2 {
    font-size: 16px;
    outline: none;
    border-radius: 16px;
}

.select2-selection {
    -webkit-box-shadow: 0;
    box-shadow: 0;
    background-color: #fff;
    border: 0;
    border-radius: 16px;
    color: #555555;
    font-size: 14px;
    outline: 0;
    min-height: 48px;
    text-align: left;
}
  
.select2-selection__rendered {
    margin: 10px;
    border-radius: 16px;
}

.select2-selection__arrow {
    margin: 10px;
    border-radius: 16px;
}

[class^='select2'] {
    border-radius: 16px !important;
}

#weight, #DateAssign, #DateDue {
    width: 80%;
    font-size: 16px;
    padding: 8px;
    outline: none;
    border-radius: 16px;
    background-color: transparent;
    border: 1px solid rgb(192, 192, 192);
    color: black;
    transition: all 0.5s ease;
}

#weight:focus {
    border: 1px solid #5865F2;
}

.modal-dialog {
    width: 50%;
}

/* #sidenav {
    width: 17%;
    background-color: #ccc;
}

#container {
    width: 300px;
    background-color: #ffcc33;
    margin: auto;
}

#sidenav {
    width: 17%;
    background-color: #ccc;
    float: left;
    height: auto;
}
#entirepost {
    width: 83%;
    float: left;
    height: auto;
}
#clear {
    clear: both;
} */

input[type=file]::file-selector-button {
    border: 1px solid #34495e;
    padding: 6px;
    border-radius: 16px;
    background-color: transparent;
    width: 150px;
    transition: all 0.5s ease;
}
  
input[type=file]::file-selector-button:hover {
    background-color: #34495e;
}

#uploadedImage {
    border-radius: 12px;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

#submissionInfoTable {
    width: 50%;
}

#submissionInfoTable th, td {
    padding: 2px;
    /* border: 1px solid black; */
}

#dropdownmenu i {
    float:right;
}

#dropdownmenu {
    width: 200px;
}


#grade9thFlare {
    background-color: rgb(133, 244, 228);
    color: rgb(50, 110, 121);
}

#grade10thFlare {
    background-color: rgb(198, 244, 179);
    color: rgb(50, 100, 54);
}

#grade11thFlare {
    background-color: rgb(206, 213, 255);
    color: rgb(50, 100, 145);
}

#grade12thFlare {
    background-color: rgb(239, 222, 240);
    color: rgb(148, 91, 206);
}

第一个帖子下方的两个帖子都在侧边栏下方，并且不在第一个帖子的左右边框内。而且，当然，底部的 2 个帖子在原始代码中并不存在，如上所示。侧边栏正在使用引导实用程序.col-sm-4，而所有帖子都应该使用.col-sm-8。

当我尝试将 cmets 功能添加到我网站的另一部分（讨论板）时，似乎也会发生这种情况。

也许我在谷歌上搜索 - 我的意思是，编程技能不如通常那么好，但大量研究并未针对我的具体问题产生任何结果。

【问题讨论】：

标签： php html css sql


【解决方案1】：

在#entirepost 使用这些

如果您希望帖子水平显示

`display: flex;
 align-items: flex-start;
 justify-content: center;
 flex-direction: row;`

垂直显示使用

display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;

如果没有帮助请告诉我...

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-10
    • 2016-03-04
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode