我正在从数据库中获取数据图像,并希望在一行中最多放置 3 张图像,这些图像也有悬停效果,效果很好
我面临的问题是,如果我使用此代码显示静态图像,那么它工作正常,但如果我从数据库中获取数据,则它无法正确显示。我想以这种形式显示图像
1st_image 2nd_image 3rd_image
4th_image 5th_image 6th_image
7th_image .. and so on
但是我得到的是这种形式的图片
1st_image
2nd_image
3rd_image
4th_image
5th_image
6th_image
我的代码是
我的首页代码是
<?php
$sql = "SELECT * FROM category";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$catname=$row["catname"];
$catdesc=$row["catdesc"];
$catpic=$row["catpic"];
$id=$row["id"];
?>
<div id="effect-2" class="effects clearfix">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay">
<a href="#" class="">content</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<?}
}?>
css页面上的代码是
nav ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-bottom: 4px;
}
nav ul li a {
display: block;
padding: 5px 20px;
color: #fff;
background-color: #32c896;
}
nav ul li a:hover {
color: #fff;
background-color: #238b68;
}
nav ul li a.active {
color: #fff;
background-color: #238b68;
}
.effects {
padding-left: 15px;
}
.effects .img {
position: relative;
float: left;
margin-bottom: 5px;
width: 25%;
overflow: hidden;
}
.effects .img:nth-child(n) {
margin-right: 5px;
}
.effects .img:first-child {
margin-left: -15px;
}
.effects .img:last-child {
margin-right: 0;
}
.effects .img img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}
.overlay {
display: block;
position: absolute;
z-index: 20;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
a.close-overlay {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 45px;
height: 45px;
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 45px;
text-align: center;
background-color: #000;
cursor: pointer;
}
a.close-overlay.hidden {
display: none;
}
a.expand {
display: block;
position: absolute;
z-index: 100;
width: 60px;
height: 60px;
border: solid 5px #fff;
text-align: center;
color: #fff;
line-height: 50px;
font-weight: 700;
font-size: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
#effect-2 .overlay {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
}
#effect-2 .overlay a.expand {
left: 0;
right: 0;
top: 50%;
margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
height: 100%;
}
谁能告诉我怎么做
最佳答案
您应该在您的 html 中使用唯一的 ID。我建议始终使用类而不是 id。你可以在你的 CSS
div[id^="tocolor-"] {
/* some css rules */
}
div[id^="tocolor-"] .overlay {
/* some css rules */
}
并且在您的 html 中,您可以像这样使用数据库表 id
添加 id
<div id="effect-<?php echo $id; ?>" class="effects clearfix">
关于php - 将 3 个盒子排成一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30232535/