php - 在一个大画廊的一排两张图片

Question

我有一个问题：
我用 bootstrap 编写了整个画廊，在这个画廊中有差距。7 页上有 100 张图片，而不是在一个图片块中向下，它之间有间隙。这没有明显的顺序。

这是一张图片：

所以我想把整个 col-md 等和图片容器拿走，做我自己的专栏。所以它可以正常工作，但是我从互联网上获得的解决方案不起作用......我认为它一定是 PHP 的问题，它位于 For 循环中，而不是像解决方案中那样的纯 HTML。但我不知道如何解决它。

这是之前的PHP代码：

<?php
//require_once("galerie-config.php");
if (!isset($_GET['pageindex'])) {
    $_GET['pageindex'] = "1";
}....
<script type='text/javascript' src='../js/Bateaux/jquery/jquery.js'></script>
<script type='text/javascript' src='../js/Bateaux/jquery/jquery-migrate.min.js'></script>

<script type='text/javascript' src='../revslider/public/assets/js/jquery.themepunch.tools.min.js'></script>
<script type='text/javascript' src='../revslider/public/assets/js/jquery.themepunch.revolution.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var BateauxOptions = {"ajax_url":"../js/admin-ajax.html"};
/* ]]> */
</script>
<script type='text/javascript'>
    /* <![CDATA[ */
    var mejsL10n = {
        "language": "en-US",
        "strings": {
            "Close": "Close",
            "Fullscreen": "Fullscreen",
            "Download File": "Download File",
            "Download Video": "Download Video",
            "Play\/Pause": "Play\/Pause",
            "Mute Toggle": "Mute Toggle",
            "None": "None",
            "Turn off Fullscreen": "Turn off Fullscreen",
            "Go Fullscreen": "Go Fullscreen",
            "Unmute": "Unmute",
            "Mute": "Mute",
            "Captions\/Subtitles": "Captions\/Subtitles"
        }
    };
    var _wpmejsSettings = {
        "pluginPath": "../js\/mediaelement\/"
    };
    /* ]]> */
</script>


<script type='text/javascript' src='../js/Bateaux/hoverIntent.min.js'></script> 
<script type='text/javascript' src='../js/Bateaux/jquery/ui/widget.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/main-vendors.min.js'></script>
<script type='text/javascript' src='../js/Bateaux/main.min.js'></script>
    <!-- INNER BANNER STARTS
        ========================================================================= -->
    <div class="inner-banner" style="background-color:#fff;">
        <div class="container">
            <ol class="breadcrumb">
                <li><a href="index.php">Home</a></li>
                <li>Referenzen</li>
                <li class="active">Galerie</li>
            </ol>
            <h1>Galerie</h1>
        </div>
    </div>
    <!-- /. INNER BANNER STARTS
        ========================================================================= -->
    <!-- PORTFOLIO STARTS
        ========================================================================= -->
    **<div class="container contents portfolio">
        <div class="row no-gutter-6">
            <?php 
            require_once("dbh.php");
            $numPicturesPerPage = 20;
            //$seiten = [0,1,2,3,4,5,6,7,8,9,10];
            global $pageIndex;
            $pageIndex = 1;
            if (isset($_GET['pageindex'])) {
                $pageIndex = $_GET['pageindex'];
            }
            $bildauswahl = $numPicturesPerPage * ($pageIndex -1);

            $sql = "SELECT * FROM galeriebilder LIMIT $bildauswahl,$numPicturesPerPage";
            $rows = $dbh->query($sql);
            $imgPathNames = [];
            $i = 0;
            foreach ($rows as $row) {
                //for ($i=0;$i<$numPicturesPerPage;$i++) {
                    $bildcode = $row['bildcode'];
                    //array_push($imgPathNames, $bildcode);
                    $i++;
                    echo "<!-- Picture Starts -->";
                    ***echo "<div class='col-lg-6 col-md-6 col-sm-6'>";
                    echo    "<div class='picture'>";
                    echo        "<img id='aquarium-galerie-" . $i . "' src='../images/galerie/". "$bildcode" . "'" . " onclick='alert(\"" . $bildcode . "\")' class='img-responsive editable' alt='' />";
                    echo    "</div>";
                    echo "</div>";
                //}***
            ?>
            <!-- Picture Ends -->
            <?php
            }
            ?>
        </div>
        <div class="row">
            <!-- Picture Starts -->


            <?php
                global $numPages;
                $sql ="SELECT count(bild_id) FROM galeriebilder";
                $rows = $dbh->query($sql);

                foreach ($rows as $row){
                    global $numPictures;
                    $numPictures = $row[0];
                }
                $biggerThan = $numPictures % $numPicturesPerPage;
                $numPages = intval(floor($numPictures / $numPicturesPerPage));

                if ($biggerThan > 0) {
                    $numPages++;
                }
                if (preg_match("/d+/", $pageIndex, $matches)) { $pageIndex = $matches[0]; } // Filtert die Zahl aus z.B. 2.php heraus

                function navSeiten($aktuell,$gesamt) {
                    $pageIndex = $_GET['pageindex'];
                    $next = $aktuell + 1;
                    $previous = $aktuell - 1;
                    $ausgabe = '<ul class="pager">';
                    if ($aktuell <= 3 ) {
                        $seiten = array(1,2,3,4,5);
                    }else if ($aktuell == $gesamt -3 )  {
                        $seiten = array($aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
                    }else if ($aktuell >= $gesamt -3 )  {
                        $seiten = array($gesamt -4 , $gesamt -3, $gesamt -2  , $gesamt -1, $gesamt );
                    } else {
                        $seiten = array( $aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
                    }

                    //echo ($pageIndex);
                        ?> 
                        <li class="previous" style="<?php

                        if ($pageIndex == "1" ) { echo "display:none ";} ?>" >
                            <a href="galerie.php?pageindex=' . $previous .  '" aria-label="Previous">
                            <span aria-hidden="true"></span>
                            </a> 
                        </li>
                        <?php
                    foreach ($seiten as $seite) {   
                        if ($seite == $pageIndex) {
                            $ausgabe .= '<li class="active"><a href="galerie.php?pageindex='. $seite  . '">' . $seite . '</a></li>';

                        } else {
                            $ausgabe .='<li><a href="galerie.php?pageindex=' . $seite . '">' . $seite . '</a></li>';
                        }

                    }
                    ?><li class="next" style="
                    <?php 
                        /*$sql ="SELECT count(bild_id) FROM galeriebilder";
                        $rows = $dbh->query($sql);

                        foreach ($rows as $row) {
                            $numPictures = $row[0];
                        }*/
                        $numPicturesPerPage = 20;
                        $numPages = intval(floor($numPictures / $numPicturesPerPage));

                        if ($pageIndex == $numPages ) { echo "display:none"; }  
                    ?>" >
                        <a href="galerie.php?pageindex=' . $next . '" aria-label="Next">
                        <span aria-hidden="true"></span>
                        </a>
                    </li> 
                    <?php

                    //echo $numPages;
                    echo $numPictures;
                    $ausgabe .= '</ul>';
                    return $ausgabe;
                }

            ?>

            <div class="col-lg-12 no-gutter-12 pagging">
                <?php echo navSeiten($pageIndex,$numPages) ?> <!-- Dies ist der Funktionsaufruf der Funktion die die komplette Leiste der Seitenaufrufe-->
            </div>
        </div>
    </div>
    <!-- /. PORTFOLIO ENDS**
        ========================================================================= -->
    <!-- FOOTER STARTS
        ========================================================================= -->
        <footer class="parallax-1">
        <!-- Social Media Starts -->
        <div class="social-media transparent-black-bg" style="background-color:#000;">
            <div class="container">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                        <div class="caption"><a href="https://www.facebook.com/biologicalaquadreams" target="_blank">Facebook</a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                        <div class="caption"><a href="https://www.youtube.com/channel/UCh62XzrMQfQgbJmbtPi7TAg?view_as=subscriber" target="_blank">Youtube</a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                        <div class="caption"><a href="https://www.instagram.com/biological_aqua_dreams_/?hl=de" target="_blank">Instagram</a></div>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
                        <div class="caption"><a href="https://plus.google.com/u/1/105877304965443649297" target="_blank">Google+</a></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Social Media Ends -->
        <!-- Contact Info Starts -->
        <div class="contact-info" style="background-color:#313131;">
            <div class="container">
                <div class="row">
                    <!-- Address Starts -->
                    <div class="col-lg-3 col-md-3 col-sm-3 address">
                        <div class="footer-logo"><img src="../images/Startseite/Logo-Footer.png" class="img-responsive" alt="Logo von Biological Aqua Dreams (eine Koralle)" style="margin-left:0;"></div>
                        <address>
                            <strong>KONRAD-HAUSSMANN-WEG 6<br>
                            D-73614 SCHORNDORF</strong>
                            <div class="phone"><a href="#" style="text-decoration:none;">[phone]</a></div>
                            <div><a href="mailto:[e-mail]">[e-mail]</a></div>
                        </address>
                        <div class="about">Sie haben Fragen? Kontaktieren Sie uns einfach telefonisch oder per Email.</div>
                    </div>
                    <!-- Address Ends -->
                    <!-- Blog Posts Starts -->
                    <div class="col-lg-4 col-md-4 col-sm-4 latest-posts">
                        <h1>ALLES AUF EINEN BLICK</h1>
                        <div class="post">
                            <h2><a href="../dienstleistungen.php">Unsere Leistungen</a> </h2>
                            <div class="info"><span class="user"><a href="../dienstleistungen.php">Erfahren Sie mehr über uns</a></span></div>
                        </div>
                        <div class="post">
                            <h2><a href="../wartung_und_reparatur.php">Wartung und Reparatur</a></h2>
                            <div class="info"><span class="user"><a href="../wartung_und_reparatur.php">Wir sind für Sie da</a></span></div>
                        </div>
                    </div>
                    <!-- Blog Posts Ends -->
                    <!-- Get in Touch Starts -->
                    <div class="col-lg-5 col-md-5 col-sm-5 get-in-touch">
                        <h1>KONTAKT AUFNEHMEN</h1>
                        <form action='../process.php' method='post' name='ContactForm' id='ContactForm'>
                            <div class="form-group">                                
                                <input type="email" class="form-control" name="email" placeholder="Email *">
                            </div>
                            <textarea rows="5" class="form-control" name="comment" placeholder="Nachricht *"></textarea>
                            <div id='message_post'></div>
                            <input class="btn btn-default" type='submit' value='SENDEN' name='submitf' id="submitf" style="outline:none;">
                        </form>     
                    </div>
                    <!-- Get in Touch Ends -->
                </div>
            </div>
        </div>
        <!-- Contact Info Ends -->
        <!-- Copyright Starts -->
        <div class="copyright light-grey-bg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-md-8 col-sm-8">&copy;  2018 BIOLOGICAL AQUA DREAMS | 
                    <a href="../impressum.php" style="color:#b39500;">DATENSCHUTZ</a> | <a href="../impressum.php" style="color:#b39500;">IMPRESSUM</a></div>
                    <div class="col-lg-4 col-md-4 col-sm-4 created-by">Created by<a href="https://www.crew-ad.de"> Crew Ad</a></div>
                </div>
            </div>
        </div>
        <!-- Copyright Starts -->
    </footer>  
....

在我的解决方案之后：

<div class="container contents portfolio">
    <div class="row no-gutter-6">
        <?php 
        require_once("dbh.php");
        $numPicturesPerPage = 20;
        //$seiten = [0,1,2,3,4,5,6,7,8,9,10];
        global $pageIndex;
        $pageIndex = 1;
        if (isset($_GET['pageindex'])) {
            $pageIndex = $_GET['pageindex'];
        }
        $bildauswahl = $numPicturesPerPage * ($pageIndex -1);

        $sql = "SELECT * FROM galeriebilder LIMIT $bildauswahl,$numPicturesPerPage";
        $rows = $dbh->query($sql);
        $imgPathNames = [];
        $i = 0;
        foreach ($rows as $row) {
            //for ($i=0;$i<$numPicturesPerPage;$i++) {
                $bildcode = $row['bildcode'];
                //array_push($imgPathNames, $bildcode);
                $i++;
                echo "<!-- Picture Starts -->";
                //echo "<div class='col-lg-6 col-md-6 col-sm-6'>";
                echo    "<div class='picture'>";
                echo "<figure><img id='aquarium-galerie-" . $i . "' src='../images/galerie/". "$bildcode" .
                    "'" . "width='750px' height='500px' onclick='alert(\"" . $bildcode .
                    "\")' class='img-responsive pic editable' alt='' /></figure>";
                echo    "</div>";
                //echo "</div>";
            //}
        ?>
        <!-- Picture Ends -->
        <?php
        }
        ?>
    </div>
    <div class="row">
        <!-- Picture Starts -->


        <?php
            global $numPages;
            $sql ="SELECT count(bild_id) FROM galeriebilder";
            $rows = $dbh->query($sql);

            foreach ($rows as $row){
                global $numPictures;
                $numPictures = $row[0];
            }
            $biggerThan = $numPictures % $numPicturesPerPage;
            $numPages = intval(floor($numPictures / $numPicturesPerPage));

            if ($biggerThan > 0) {
                $numPages++;
            }
            if (preg_match("/d+/", $pageIndex, $matches)) { $pageIndex = $matches[0]; } // Filtert die Zahl aus z.B. 2.php heraus

            function navSeiten($aktuell,$gesamt) {
                $pageIndex = $_GET['pageindex'];
                $next = $aktuell + 1;
                $previous = $aktuell - 1;
                $ausgabe = '<ul class="pager">';
                if ($aktuell <= 3 ) {
                    $seiten = array(1,2,3,4,5);
                }else if ($aktuell == $gesamt -3 )  {
                    $seiten = array($aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
                }else if ($aktuell >= $gesamt -3 )  {
                    $seiten = array($gesamt -4 , $gesamt -3, $gesamt -2  , $gesamt -1, $gesamt );
                } else {
                    $seiten = array( $aktuell -2 ,$aktuell-1 ,$aktuell , $aktuell +1 , $aktuell +2);
                }

                //echo ($pageIndex);
                    ?> 
                    <li class="previous" style="<?php

                    if ($pageIndex == "1" ) { echo "display:none ";} ?>" >
                        <a href="galerie.php?pageindex=' . $previous .  '" aria-label="Previous">
                        <span aria-hidden="true"></span>
                        </a> 
                    </li>
                    <?php
                foreach ($seiten as $seite) {   
                    if ($seite == $pageIndex) {

                        $ausgabe .= '<li class="active"><a href="galerie.php?pageindex='. $seite  . '">' . $seite . '</a></li>';

                    } else {
                        $ausgabe .='<li><a href="galerie.php?pageindex=' . $seite . '">' . $seite . '</a></li>';
                    }

                }
                ?><li class="next" style="
                <?php 
                    /*$sql ="SELECT count(bild_id) FROM galeriebilder";
                    $rows = $dbh->query($sql);

                    foreach ($rows as $row) {
                        $numPictures = $row[0];
                    }*/
                    $numPicturesPerPage = 20;
                    $numPages = intval(floor($numPictures / $numPicturesPerPage));

                    if ($pageIndex == $numPages ) { echo "display:none"; }  
                ?>" >
                    <a href="galerie.php?pageindex=' . $next . '" aria-label="Next">
                    <span aria-hidden="true"></span>
                    </a>
                </li> 
                <?php

                //echo $numPages;
                echo $numPictures;
                $ausgabe .= '</ul>';
                return $ausgabe;
            }


        ?>

        <div class="col-lg-12 no-gutter-12 pagging">
            <?php echo navSeiten($pageIndex,$numPages) ?> <!-- Dies ist der Funktionsaufruf der Funktion die die komplette Leiste der Seitenaufrufe-->
        </div>
    </div>
</div>

这是CSS代码：

.picture {    
    clear:both;     
}

.pic {
    //float: left;
    width:50%;
    display:block;      
}

figure {
    display: table-cell;
    text-align: center;
}

抱歉，它现在是我在互联网上找到的所有解决方案的混合体。我已经没有改变它了。
我希望你能帮助我。

带着亲切的问候卢卡斯·斯泰特

标签： phphtmlimage