msqli_fetch_array或assoc和css获取空格

Question

I am developing a simple project but encountered a problem which I can not find solution.

The follow php code:

<?php include "header.php"; ?>
<?php
    $subtitle = "Os teus animes favoritos diariamente!";
    $conn = mysqli_connect("$host","$dbuser","$dbpw","$db");

        if (mysqli_connect_errno())
         {
        echo "Falha ao ligar à Base de Dados: " . mysqli_connect_error();
         }

    $result = mysqli_query($conn, "SELECT * FROM m_capitulos ORDER BY 'm_capitulos'.'id_cap' DESC LIMIT 30") or die(mysqli_error($conn));
    mysqli_close($conn);
?>
<section class="mbr-section mbr-section--relative mbr-section--fixed-size mbr-after-navbar" id="features1-3" style="background-color: rgb(255, 255, 255);">
<div class="mbr-section__container container"><!-- "mbr-section__container--std-top-padding" para dar padding no top! -->
    <div class="mbr-section__row row">

    <?php while ($row = mysqli_fetch_array($result)){ ?>
        <div class="mbr-section__col col-xs-12 col-sm-4">
            <div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
                <a href="/assistir/<?php echo $row['seo']; ?>"><figure class="mbr-figure"><img class="mbr-figure__img" src="<?php echo $row['p_thumb']; ?>"></figure></a>
            </div>
            <div class="mbr-section__container mbr-section__container--middle">
                <div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
                    <h3 class="mbr-header__text"><a href="/assistir/<?php echo $row['seo']; ?>"><?php echo $row['nombre_cap']; ?></a></h3>
                </div>
            </div>
            <div class="mbr-section__container mbr-section__container--last">
                <div class="mbr-buttons mbr-buttons--center"><a href="<?php echo $row['p_descarga']; ?>" target="_blank" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default"alt="Download Regular">DOWNLOAD</a></div>
                <br>

                <div class="mbr-buttons mbr-buttons--center"><a href="<?php echo $row['p_descargavip']; ?>" target="_blank" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default" alt="Download Premium">DOWNLOAD</a></div>

                <br>
                <div class="mbr-buttons mbr-buttons--center"><a href="/assistir/<?php echo $row['seo']; ?>" target="_blank" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default" alt="Assisir Online">ASSISTIR</a></div>
            </div>
        </div>
        <?php } ?>

    </div>
</div>
</section>
<?php include "footer.php"; ?>

But when I remove the page css the empty space between the results disappears.

The Empty Space on the midle of my content box :

Answer 1

The result on the right just above the space is shorter, thus the next element goes below it instead of going to next row. I suggest you split elements into groups of 3 so that they can go into rows, or alternatively set the height for each result so that they all line up.

The example below adds a counter; every time you run through an element it checks if the element count divides by three, and if so, starts a new row. The same check is done at the end, except that it checks whether the element is the last in the row-of-three, and if so, ends the row tag.

<?php
$i = 0;
while ($row = mysqli_fetch_array($result)){ ?>
    <?php if ($i % 3 == 0): ?><div class="row"><?php endif; ?>
    <div class="mbr-section__col col-xs-12 col-sm-4">
        <div class="mbr-section__container mbr-section__container--center mbr-section__container--middle">
            <a href="/assistir/<?php echo $row['seo']; ?>"><figure class="mbr-figure"><img class="mbr-figure__img" src="<?php echo $row['p_thumb']; ?>"></figure></a>
        </div>
        <div class="mbr-section__container mbr-section__container--middle">
            <div class="mbr-header mbr-header--reduce mbr-header--center mbr-header--wysiwyg">
                <h3 class="mbr-header__text"><a href="/assistir/<?php echo $row['seo']; ?>"><?php echo $row['nombre_cap']; ?></a></h3>
            </div>
        </div>
        <div class="mbr-section__container mbr-section__container--last">
            <div class="mbr-buttons mbr-buttons--center"><a href="<?php echo $row['p_descarga']; ?>" target="_blank" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default"alt="Download Regular">DOWNLOAD</a></div>
            <br>

            <div class="mbr-buttons mbr-buttons--center"><a href="<?php echo $row['p_descargavip']; ?>" target="_blank" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default" alt="Download Premium">DOWNLOAD</a></div>

            <br>
            <div class="mbr-buttons mbr-buttons--center"><a href="/assistir/<?php echo $row['seo']; ?>" target="_blank" class="mbr-buttons__btn btn btn-wrap btn-xs-lg btn-default" alt="Assisir Online">ASSISTIR</a></div>
        </div>
    </div>
    <?php if ($i % 3 == 2): ?></div><?php endif;
    $i++
    ?>
<?php } ?>