Question

我在这里制作了这个图库列表视图页面，我希望它能让所有3列同样填充我的数据库中的项目，现在它每次都会创建一个新列并显示相同的sql项目三次。

我在这里：http://i.stack.imgur.com/LMw1L.png

正如你所看到的，它只是创建了一大堆不符合我想要的列。

如何更改我的php以便它在我的3列（.column，.column-2，.column-3）中整齐地分发数据库项目？

home.php

<?php
ob_start();
require_once("connect.php");


if(isset($_POST['name'])){

$_SESSION["user"] = $_POST["name"];
$name = $_SESSION["user"];

}
?>



<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/dotbar.css">
    <link rel="stylesheet" href="css/loginoverlay.css">



    <!--jQuery library voor de menubar -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

    <meta charset="utf-8">

</head>

<body>
   <!-- Show login screen, when cookie is not placed -->
<?php 
if (empty($_COOKIE['first_time'])) {
    ?><div id="black-overlay">
        <div id="grey-box">
           <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>x</span>
                <form action="home.php" method="POST">
                <br>
                <br>
                <label for="name"> Naam: </label>
                <br>
                <input type="text" name="name" id="name">
                <label for="password"> Wachtwoord: </label>
                <br>
                <input type="password" name="password" id="password">
                <input type="submit" value="submit" name="submit">
            </form>
        </div>
    </div><?php;
    setcookie("first_time", 1, time()+157680000);  /* expire in 5 years */} 
?>

    <!--page content -->
   <div class="container">
        <div class="container2">
            <nav id='nav_bar'>
                <ul class='nav_links'>
                  <li>
                       <?php
                        //If there is a user SESSION echo in NAV bar 
                        if(isset($_SESSION['user'])) {
                        //echo admin link when admin is logged in
                        if ($_SESSION['user'] == 'admin') {
                        echo "<a href='admin.php'>Admin</a>";
                        echo "/<br>";
                        echo "<a href='sessiondestroy.php'>Log uit</a>";}
                        //echo user which is not the admin when logged in
                        else {echo $_SESSION["user"];
                        echo "/<br>";
                        echo "<a href='sessiondestroy.php'>Log uit</a>";}}
                        //echo the login button when user is not logged in
                        else { echo "<a href='login.php'>Login</a>";}
                        ?>
                        <br><br><br>→<br><br><br>
                    </li>
                    <li>
                        <a href="?pages=home">
                        Home<br><br><br>→<br><br><br>
                        </a>
                    </li>
                    <li>
                        <a href="?pages=news">
                        Blog<br><br><br>→<br><br><br>
                        </a>
                    </li>
                    <li>
                        <a href="?pages=news2">
                        Gallery <br><br><br>→ <br><br><br>
                        </a>
                    </li>
                    <li>
                        <a href="?pages=news3">
                        About <br><br><br>→ <br><br><br>
                        </a>
                    </li>
                    <li>
                        <a href="?pages=news4">
                        Contact<br><br><br>→<br><br><br>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="content">

                <h1>
                    GRAKA!
                </h1>

                <div id="bar2">
                    <div id="circle1"></div>
                    <div id="circle2"></div>
                    <div id="circle3"></div>
                    <div id="circle4"></div>
                    <div id="circle5"></div>
                    <div id="circle6"></div>
                    <div id="circle7"></div>
                    <div id="circle8"></div>
                    <div id="circle9"></div>
                    <div id="circle10"></div>
                    <div id="circle11"></div>
                </div>

               <?php

            if(isset($_GET['pages'])) {
            $pages = $_GET['pages'];
            $pagename = $pages. '.php';
            include_once($pagename);

       }?>


            </div>

        </div>
    </div>

    <footer>
        <div class="footer-content">
            <h2>
                Designed and produced by 
                </h2>
            <h3>
                All rights reserved.<br>
                </h3>
        </div>
    </footer>

    <!--Menubar script -->
    <script src="menubar.js"></script>
</body>

</html>


<?php
ob_flush();

?>

news2.php

                $query = "SELECT * FROM gallery";
                $result = mysqli_query($con, $query);
                $count = 0;
                while ($row = mysqli_fetch_array($result)) {?> 

              <?php if($count %  3 == 0) {?>

              <div class="column">

                    <div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php 

                     echo "".$row['galleryfoto']."";

                ?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>

                <h4><?php echo $row['gallerytitel']?></h4>

                </div>
              <?php}?>

                <div class="column2">

                    <div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php 

                     echo "".$row['galleryfoto']."";

                ?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>

                <h4><?php echo $row['gallerytitel']?></h4>

                </div>

                <div class="column3">

                    <div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php 

                     echo "".$row['galleryfoto']."";

                ?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>

                <h4><?php echo $row['gallerytitel']?></h4>

                </div>

        <?php } ?>

的CSS：

body {
    margin: 0px;
    padding: 0px;
    background-color: black;
    background-attachment: fixed;
    background-image: url(img/2560x2560bubbles.png);
    background-size: cover;
    font-family: "Segoe UI", 'Helvetica Neue';
}

.container {
    margin-top: 520px;
    box-shadow: 10px 10px 5px #888888;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.75);
    background-image: -moz-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
    background-image: -webkit-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
    background-image: -ms-linear-gradient( 180deg, rgb(158, 158, 158) 0%, rgb(188, 188, 188) 10%, rgb(220, 220, 220) 22%, rgb(251, 251, 251) 50%, rgb(220, 220, 220) 78%, rgb(188, 188, 188) 90%, rgb(158, 158, 158) 100%);
}

.container2 {
    width: 1280px;
    padding-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

nav {
    margin-left: 7.5%;
    margin-top: 100px;
    width: 10%;
    float: left;
}

#nav_bar {}

.navbar-fixed {
    top: 0;
    z-index: 100;
    position: fixed;
    margin-left: 5.3%;
}

ul {
    list-style-type: none;
}

li {
    float: left;
    font-size: 1em;
    width: 100%;
    height: auto;
    text-align: left;
    font-weight: bold;
    line-height: 1em;
    margin-left: 0%;
    margin-top: 0px;
    clear: none;
    min-height: 0px;
}

a {
    text-decoration: none;
    color: black;
}

a:visited {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: none;
    color: grey;
}

a:focus {
    text-decoration: none;
    color: yellowgreen;
}

a:active {
    text-decoration: none;
    color: greenyellow
}

.content {
    width: 70%;
    margin-right: 7.5%;
    margin-top: 100px;
    float: right;
}

article {
    width: 45.4%;
    padding: 2.3%;
    float: left;
}

img {
    width: 100%;

}

h1 {
    text-align: right;
    margin: 0px;
    font-size: 6.0em;
    margin-bottom: 10px;
}

h2 {
    margin: 0px;
    text-align: center;
}

h3 {
    margin: 0px;
    text-align: center;
}

p {}

p1 {
    float: right;
}

footer {
    margin-top: 320px;
    background-color: rgb(28, 28, 28);
    height: 260px;
    padding: 120px;
}

.footer-content {
    color: white;
}


/*--Bloglist.css --*/

#blog {
    width: 100%;
    padding: 2.3%;
    margin-top: 2.3%;
    overflow: hidden;
}

article3 {
    width: 100%;
    padding: 2.3%;
    overflow: hidden;
}

#blogfoto {
    width: 257px;
    height: 257px;
    float: left;
    overflow: hidden;
    background-color: black;



}


p1#blog {
    margin-top: 0px;
    width: 62.07%;
    float: left;

}

h4 {
    margin-left: 2.3%;
    float: left;
    width: 56.66%;
    margin-bottom: 0px;
}

/*-- Thumbnails --*/

.wrapper {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
}

/*-- Gallerylist -- */

.column {
    float: left;
    margin-left: 0px;
    margin-top: 20px;
    width: 28.73%;
    padding: 2.3%;
    background-color: blue;
}

.column2 {
    float: left;
    margin-left: 0px;
    margin-top: 20px;
    width: 28.73%;
    padding: 2.3%;
    background-color: green;
}

.column3 {
    float: left;
    margin-left: 0px;
    margin-top: 20px;
    width: 28.73%;
    padding: 2.3%;
    background-color: red;
}

Answer 1

我假设您希望每列显示与数据库不同的行。如果是这样，只需在输入循环之前包含一个计数器变量$count = 0;。当$count % 3 == 0使用“.column”类时，$count % 3 == 1使用'.column-2'和$count % 3 == 2时使用'.column-3'。不要忘记在每次迭代结束时递增循环计数器。

编辑：

<?php
$query = "SELECT * FROM gallery";
                $result = mysqli_query($con, $query);
                $count = 0;
                while ($row = mysqli_fetch_array($result)) {?> 
              <?php if($count %  3 == 0) {?>
              <div class="column">
                    <div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php 
                     echo "".$row['galleryfoto']."";
                ?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
                <h4><?php echo $row['gallerytitel']?></h4>

              <?php } 
              else if($count %  3 == 1){
              ?>

            </div>
            <div class="column2">
                <div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php 
                 echo "".$row['galleryfoto']."";
            ?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
            <h4><?php echo $row['gallerytitel']?></h4>
            </div>
          <?php } 
          else{
              ?>
            <div class="column3">

                <div style="width: 100%; height: 0; padding-bottom: 100%; background-image:url('img/<?php 

                 echo "".$row['galleryfoto']."";

            ?>'); background-repeat:no-repeat; background-size:cover; background-color: black; float:left; background-position: center;"></div>
            <h4><?php echo $row['gallerytitel']?></h4>
            </div>
            <?php 
            }
            $count++;
          }
?>

这不是最新的代码，但这应该可以完成工作。

将回显行结果拆分为3个单独的列（div）

1 个答案: