想要在整齐的 3 列和行中显示 php 的关联数组 第 1 步 - 分离逻辑和呈现第 2 步 - 将其显示为 html

编程问答 2022-05-31

问题描述

我对 PHP 很陌生。我在网上找不到答案的快速问题，尽管我相信你们中的大多数人很快就会知道答案。我使用此 PHP 代码在图像下显示索引名称，我假设整体视图为 3 列和 3 行，所以我想要它。有人可以帮我解决这个问题，谢谢。

<!DOCTYPE html>
<html>

<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div id="gridview">
        <div class="heading">Image gallery</div>
        <div class="image">
        <?PHP
$product = array(
                "Winter" => array(

                    "Coat"  => '<img src="https://i.ibb.co/0VR94xj/coat.jpg">',"Jacket" => '<img src="https://i.ibb.co/ZgcwJV4/jacket.jpg" alt="jacket" border="0">',"Hoodie" => '<img src="https://i.ibb.co/ZNfcDkk/Hoodie.jpg" alt="Hoodie">',),"Down" => array(
                    "Pants"  => '<img src="https://i.ibb.co/k6ZsZ80/jeans.png" alt="jeans">',"Shorts" => '<img src="https://i.ibb.co/GnWbwjs/Shorts.jpg" alt="Shorts">',"Trouser" => '<img src="https://i.ibb.co/92DwnNF/trouser.jpg" alt="trouser">',"Feet" => array(    
                     "Boots" => '<img src="https://i.ibb.co/jW3RfLm/boots.jpg">',"Casual" => '<img src="https://i.ibb.co/F43T60v/casual.webp" alt="casual">',"Spikes" => '<img src="https://i.ibb.co/Sn3Q6rn/joggers.jpg" alt="joggers" border="0">'
                ),);
foreach ($product as $key => $value) {
    echo $key."<br>";
    foreach ($value as $k => $v) {
       echo "$k---$v  <br>";
    }}
?>
</div>
</div>
</body>
</html>


#gridview {
   text-align:center; 
}

div.image {
    margin: 10px;
    display: inline-block;
}

div.image img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

div.image img:hover {
    Box-shadow: 0 5px 5px 0 rgba(0,0.32),0 0 0 0px rgba(0,0.16);
}

.heading{    
    padding: 10px 10px;
    border-radius: 2px;
    color: #FFF;
    background: #6aadf1;
    margin-bottom:10px;
    font-size: 1.5em;
}
#grid{
    margin-bottom:30px;
}

@media screen and (min-width: 1224px) {
    div.image {
        width: 300px;
    }
}

@media screen and (min-width: 1044px) and (max-width: 1224px) {
    div.image {
        width: 250px;
    }
}

@media screen and (min-width: 845px) and (max-width: 1044px) {
    div.image {
        width: 200px;
    }
}

解决方法

第 1 步 - 分离逻辑和呈现

您应该做的第一件事是 php 逻辑。在这种情况下，获取数据只是创建数组，但在跳转到 html 之前通常还有很多工作要做。编写第一个 html 标签后，仅将 php 用于循环和填充变量（以及用于演示的次要条件）

因此，您的页面将以

开头 

<?php
$product = array(
    "Winter" => array(
         "Coat"  => '<img src="https://i.ibb.co/0VR94xj/coat.jpg">',"Jacket" => '<img src="https://i.ibb.co/ZgcwJV4/jacket.jpg" alt="jacket" border="0">',"Hoodie" => '<img src="https://i.ibb.co/ZNfcDkk/Hoodie.jpg" alt="Hoodie">',),"Down" => array(
        "Pants"  => '<img src="https://i.ibb.co/k6ZsZ80/jeans.png" alt="jeans">',"Shorts" => '<img src="https://i.ibb.co/GnWbwjs/Shorts.jpg" alt="Shorts">',"Trouser" => '<img src="https://i.ibb.co/92DwnNF/trouser.jpg" alt="trouser">',"Feet" => array(    
        "Boots" => '<img src="https://i.ibb.co/jW3RfLm/boots.jpg">',"Casual" => '<img src="https://i.ibb.co/F43T60v/casual.webp" alt="casual">',"Spikes" => '<img src="https://i.ibb.co/Sn3Q6rn/joggers.jpg" alt="joggers" border="0">'
    ),);

第 2 步 - 将其显示为 html

现在，在完成所有逻辑之后，您可以继续进行演示 (html)。我将使用引导程序进行展示：

?>
<!DOCTYPE html>
<html>

<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class="row">
        <div class="col-sm-12">Image Gallery</div>

        <?php foreach($product as $category => $data): ?>
        <div class="col-sm-12"><?= $category</div>

            <?php foreach($data as $name => $image): ?>
            <div class="col-sm-4">
                <div><?= $name ?></div>
                <div><?= $image?></div>
            </div>
            <?php endforeach; ?>

        </div>
        <?php endforeach; ?>

    </div>
</body>
</html>

更进一步，您可以将 $product 更改为仅包含图片网址而不是整个 img 标签。

arraysarraysarraysassociative