PHP动态网站网页分栏显示异常问题求助

Hey Helen, I see exactly what's going on here—your HTML structure has some misplaced closing tags and nesting issues that are breaking Bootstrap's grid system. Let's walk through the fixes step by step:

Key Problems in Your Current Code #

• The closing } for your personal details while loop is placed right after the <h3>Articles by...</h3> line, which means you're cutting off the profile column's structure mid-way.
• Your article loop isn't properly wrapping each post in a container, and the closing </div> for the right column is misplaced, causing subsequent articles to escape the 4-column width and drop below the profile.
• Also, a quick heads-up: the mysql_* functions you're using are deprecated—you should switch to mysqli or PDO for database interactions to keep your code secure and supported.

Corrected Code #

Here's the fixed version with proper structure and closed tags:

<div class="container">
    <?php 
    session_start(); 
    $q = $_SESSION['id']; 
    // Switch to mysqli for better security/support
    $con = mysqli_connect("localhost","root","","demo_db"); 
    if (!$con) {
        die("Connection failed: " . mysqli_connect_error());
    }

    $sql = "select * from personal_details where id=$q"; 
    $res = mysqli_query($con, $sql); 
    while($ar = mysqli_fetch_array($res)) { 
    ?>
        <div class="row">
            <!-- Left Profile Column -->
            <div style="background-color:rgba(125, 178, 194, 0.43); margin-bottom:10px;" class="col-sm-8 col-md-8 col-lg-8">
                <div class="row">
                    <div class="col-sm-4 col-md-4 col-lg-4">
                        <img style="margin:20px;" src="uploads/<?php echo $ar[17]; ?>">
                    </div>
                    <div class="col-sm-8 col-md-8 col-lg-8">
                        <h3><b>Dr. <?php echo $ar[1];?></b></h3>
                        <h5><?php echo $ar[8];?>, <?php echo $ar[12];?></h5>
                        <h5><?php echo $ar[2];?>, <?php echo $ar[7];?> years of experience</h5>
                        <p><?php echo $ar[16];?></p>
                    </div>
                </div>
                <div style="margin:20px;">
                    <h4><b>Services</b></h4>
                    <hr>
                    <ul>
                        <li>
                            <h5><?php echo $ar[18]; ?></h5>
                        </li>
                    </ul>
                    <h4><b>Specialisations</b></h4>
                    <hr>
                    <ul>
                        <li>
                            <h5><?php echo $ar[2]; ?></h5>
                        </li>
                    </ul>
                    <h4><b>Education</b></h4>
                    <hr>
                    <ul>
                        <li>
                            <h5><?php echo $ar[8]; ?> - <?php echo $ar[9]; ?> , <?php echo $ar[10]; ?> , <?php echo $ar[11];?></h5>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <h5><?php echo $ar[12]; ?> - <?php echo $ar[13]; ?> , <?php echo $ar[14]; ?> , <?php echo $ar[15];?></h5>
                        </li>
                    </ul>
                </div>
            </div> <!-- End of Left Profile Column -->

            <!-- Right Articles Column -->
            <div class="col-sm-4 col-md-4 col-lg-4">
                <h3>Articles by <?php echo $ar[1];?></h3>
                <hr>
                <?php 
                $sql1 = "select * from article_tb where id=$q"; 
                $res1 = mysqli_query($con, $sql1); 
                while($ar_article = mysqli_fetch_array($res1)) { 
                    // No need to reset $_SESSION['id'] here since it's already set
                ?>
                    <div class="article-item mb-3"> <!-- Added margin-bottom for spacing -->
                        <h4><b><?php echo $ar_article[1]; ?></b></h4>
                        <div class="row">
                            <div class="col-sm-7 col-lg-7 col-md-7">
                                <img src="uploads/<?php echo $ar_article[3]; ?>" width="170px" height="88">
                            </div>
                            <div class="col-sm-5 col-md-5 col-lg-5 d-flex align-items-center"> <!-- Added flex for button alignment -->
                                <form action="blog.php" class="w-100">
                                    <input type="submit" class="btn btn-info w-100" name="read" value="Read" />
                                </form>
                            </div>
                        </div>
                        <hr>
                    </div>
                <?php } ?>
            </div> <!-- End of Right Articles Column -->
        </div> <!-- End of Main Row -->
    <?php } ?>
</div> <!-- End of Container -->

What Changed? #

1. Fixed HTML Nesting: Moved the closing } for the personal details loop to after both columns are fully closed, ensuring the main row wraps both the profile and articles correctly.
2. Wrapped Each Article: Added a <div class="article-item"> around each post to keep them contained within the right column.
3. Switched to mysqli: Updated database calls to use the modern, supported mysqli extension instead of deprecated mysql_* functions.
4. Minor Style Tweaks: Added flex alignment for the "Read" button and margin between articles for better spacing.

This should fix the issue where your second article drops below the profile section—Bootstrap's grid will now properly maintain the 8/4 column split for all content.

内容的提问来源于stack exchange，提问作者Helen