Php Горизонтальная петля

Question

это мой текущий код.

                                    include "dbConnect.php";
                                    $std_ID = $_SESSION['suser']['std_ID'];
                                    $query = $DBcon->prepare("SELECT * FROM `blog` WHERE `sender_B`='$std_ID' ");
                                    $query->execute();
                                    $result=$query->get_result();
                                        if($result->num_rows > 0){

                                            while($row = $result->fetch_assoc()){
                                    $ID = $row['blog_ID']
                            ?>

                            <div class="alert alert-danger" role="alert">
                                 <div class="main">
                                    <h2>ID</h2>
                                    <h5><?= $row['blog_ID']?></h5>
                                    <h2>TITLE</h2>
                                    <h5><?= $row['title']?></h5>
                                    <h2>Description</h2>
                                    <h5><?= $row['description']?></h5>
                                    <h2>std_ID</h2>
                                    <h5><?= $row['sender_B']?></h5>
                                    <h5><a href="view&commentBlog.php?ID=<?= "$ID"?>" class='btn btn-info'>View Details</a></h5>
                                  </div>
                                </div>
                            <?php 
                                    }
                                        }
                                    else{
                            ?>
                                    <p>No blog(s) found...</p>
                                        <?php } ?>                  

результат после зацикливания

<1st box>
ID
Title
Description
student_ID
<end of 1st box>

<2nd box>
ID
Title
Description
student_ID
<end of 2nd box>

результат, который мне нужен, после отображения 1-го поля, go вправо, чтобы отобразить 2-й блок, а затем перейти к другой строке и продолжить ...

<1st box>             <2nd box>
    ID                   ID
    Title                Title
    Description          Description
    student_ID           student_ID
 <end of 1st box>     <end of 2nd box>

<3rd box>             <4th box>
   ID                   ID
   Title                Title
   Description          Description
   student_ID           student_ID
<end of 3rd box>      <end of 4th box>

ТАК, есть ли и какие способы отображения ?? ТНХ.

Answer 1

Система сетки Bootstrap использует серию контейнеров, строк и столбцов для размещения и выравнивания содержимого. Он построен на flexbox и полностью отзывчив.

<div class="row">
    <div class="col-md-6">
        Content
    </div>
    <div class="col-md-6">
        Content
    </div>
    <div class="col-md-6">
        Content
    </div>
    <div class="col-md-6">
        Content
    </div>

    ....

</div>

Результат

---

Кому реализовать свой код, вы можете использовать:

<?php if ($result->num_rows > 0) { ?>
    <div class="row">
        <?php
        while ($row = $result->fetch_assoc()) {
        $ID = $row['blog_ID'];
        ?>
        <div class="col-md-6">
            <div class="alert alert-danger" role="alert">
                <div class="main">
                    <h2>ID</h2>
                    <h5><?=$row['blog_ID']?></h5>
                    <h2>TITLE</h2>
                    <h5><?=$row['title']?></h5>
                    <h2>Description</h2>
                    <h5><?=$row['description']?></h5>
                    <h2>std_ID</h2>
                    <h5><?=$row['sender_B']?></h5>
                    <h5><a href="view&commentBlog.php?ID=<?="$ID"?>" class='btn btn-info'>View Details</a></h5>
                </div>
            </div>
        </div>
        <?php } ?>
    </div>
<?php } else { ?>
    <p>No blog(s) found...</p>
<?php } ?>

Результат

Answer 2

другое решение - использовать flexbox с отзывчивыми блоками равной высоты.

добавить стиль:

<style>
    .list{
        width:100%;
        overflow:hidden;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap;
    }
     .listItem{
        width:50%;
        float:left;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
    }
     .listItemIinner{
        padding-top:10px;
        border:1px solid #000;
        width:100%;
        color:#FFF;
        background-color:#ddd;
        overflow:hidden;
    }
    .listItem figcaption{
        color:#000;
    }
    </style>

, затем отредактировать код:

<?php 
echo "<ul class='list'>";
while($row = $result->fetch_assoc()){
    $ID = $row['blog_ID'];
    echo "<li class='listItem'>";
    echo "<figure class='listItemIinner'>"
    echo "<figcaption>";
    ?>
    <div class="alert alert-danger" role="alert">
        <div class="main">
        <h2>ID</h2>
        <h5><?= $row['blog_ID']?></h5>
        <h2>TITLE</h2>
        <h5><?= $row['title']?></h5>
        <h2>Description</h2>
        <h5><?= $row['description']?></h5>
        <h2>std_ID</h2>
        <h5><?= $row['sender_B']?></h5>
        <h5><a href="view&commentBlog.php?ID=<?= "$ID"?>" class='btn btn-info'>View Details</a></h5>
        </div>
    </div>
<?php echo "</figcaption></figure></li>";
}
echo "</ul>";
?>

и теперь вы если в строке 2 столбца, вы также можете изменить ширину (.listItem), например, на 25%, а затем в строке 4 столбца.

подробнее см. здесь: https://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Answer 3

попробуйте использовать <table>, если вы не используете bootstrap

<table>
<?php
$row = 1;
while($row = $result->fetch_assoc()){
    $ID = $row['blog_ID'];
    if($row%2 != 0) echo '<tr>';
    ?>
        <td>
            <div class="alert alert-danger" role="alert">
             <div class="main">
                <h2>ID</h2>
                <h5><?= $row['blog_ID']?></h5>
                <h2>TITLE</h2>
                <h5><?= $row['title']?></h5>
                <h2>Description</h2>
                <h5><?= $row['description']?></h5>
                <h2>std_ID</h2>
                <h5><?= $row['sender_B']?></h5>
                <h5><a href="view&commentBlog.php?ID=<?= "$ID"?>" class='btn btn-info'>View Details</a></h5>
              </div>
            </div>
        </td>
    <?php 
    if($row%2 != 0) echo '</tr>';
    $row++;
}
?>
</table>