如何解决想要在整齐的 3 列和行中显示 php 的关联数组 第 1 步 - 分离逻辑和呈现第 2 步 - 将其显示为 html
我对 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 标签。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。