php - PHP自定义div以彼此相邻放置

问题描述

我有个问题。我创建了这个代码来显示我的数据库中的产品，比如产品：

<?php

    include("connect.php");
    session_start();

    $status="";
    if (isset($_POST['id']) && $_POST['id']!="")
    {
        $Id = $_POST['id'];
        $result = mysqli_query($conn,"SELECT * FROM Producten WHERE `Id`='$Id'");
        $row = mysqli_fetch_assoc($result);
        $naam = $row['Naam'];
        $id = $row['Id'];
        $prijs = $row['Prijs'];
        $foto = $row['Foto'];

        $winkelwagen_array = array(
            $id=>array(
            'id'=>$id,
            'naam'=>$naam,
            'prijs'=>$prijs,
            'hoeveelheid'=>1,
            'foto'=>$foto)
        );

        if(empty($_SESSION["winkelwagen"]))
        {
            $_SESSION["winkelwagen"] = $winkelwagen_array;
            $status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
        }
        else
        {
            $_SESSION["winkelwagen"] = array_merge($_SESSION["winkelwagen"],$winkelwagen_array);
            $status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
        }
    }
?>

<html>
    <head>
        <link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
    </head>
    <body>      
        <div style="width:700px; margin:50 auto;"> 

            <?php
            if(!empty($_SESSION["winkelwagen"]))
            {
                $winkelwagen_hoeveelheid = count(array_keys($_SESSION["winkelwagen"]));
                ?>

                <div class="winkelwagen_div">
                    <a href="winkelmandje.php"><img src="media/winkelwagen_logo.png" /> Winkelwagen<span><?php echo $winkelwagen_hoeveelheid; ?></span></a>
                </div>
                <?php
            }

            $result = mysqli_query($conn,"SELECT * FROM Producten");
            while($row = mysqli_fetch_assoc($result))
            {
                echo "<div class='product_vak'>
                      <form method='post' actie=''>
                      <input type='hidden' name='id' value=".$row['Id']." />
                      <div class='foto'><img src='".$row['Foto']."' /></div>
                      <div class='naam'>".$row['Naam']."</div>
                      <div class='prijs'>€".$row['Prijs']."</div>
                      <button type='submit' class='koop'>Koop nu</button>
                      </form>
                      </div>";
            }
            mysqli_close($conn);
            ?>

            <div style="clear:both;"></div>

            <div class="melding_box" style="margin:10px 0px;">
                <?php echo $status; ?>
            </div>
        </div>
    </body>
</html>

用这个CSS：

.product_vak {
    float:left;
    padding: 10px;
    text-align: center;
    }
.product_vak:hover {
    box-shadow: 0 0 0 2px #e5e5e5;
    cursor:pointer;
    }
.product_vak .naam {
    font-weight:bold;
    }
.product_vak .koop {
    text-transform: uppercase;
    background: #F68B1E;
    border: 1px solid #F68B1E;
    cursor: pointer;
    color: #fff;
    padding: 8px 40px;
    margin-top: 10px;
}
.product_vak .koop:hover {
    background: #f17e0a;
    border-color: #f17e0a;
}
.melding_box .box{
    margin: 10px 0px;
    border: 1px solid #2b772e;
    text-align: center;
    font-weight: bold;
    color: #2b772e;
    }
.table td {
    border-bottom: #F0F0F0 1px solid;
    padding: 10px;
    }
.winkelwagen_div {
    float:right;
    font-weight:bold;
    position:relative;
    }
.winkelwagen_div a {
    color:#000;
    }   
.winkelwagen_div span {
    font-size: 12px;
    line-height: 14px;
    background: #F68B1E;
    padding: 2px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: -1px;
    left: 13px;
    color: #fff;
    width: 14px;
    height: 13px;
    text-align: center;
    }
.winkelwagen .verwijderen {
    background: none;
    border: none;
    color: #0067ab;
    cursor: pointer;
    padding: 0px;
    }
.winkelwagen .verwijderen:hover {
    text-decoration:underline;
    }

但是当我加载页面时，我看到 2 个产品彼此重叠，尺寸非常大。现在我怎样才能让它们彼此相邻并以更小的尺寸加载，因为现在它们正在填满每个产品的整个屏幕！

我已经尝试过给出product_vak一个宽度，但是图像的大小不合适！

我怎样才能解决这个问题？

标签： phphtmlcss

php - PHP自定义div以彼此相邻放置

问题描述

解决方案

推荐阅读