How to order divs side by side and centered when get datas from database in php and css
Question
How to order divs side by side and centered when get datas from database in php and css ?
php and html codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<?php include ("connect.php");
$data = $db->query("select * from videos order by id desc");
$data ->execute();
while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
<div class="cards">
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><a href="#"><?php echo $row['v_models'];?></a></p>
</div>
</div>
</div>
<?php }?>
</body>
</html>
css style codes
body {
background-color:#282828;
}
a{
text-decoration: none;
}
.cards{
text-align: center;
font-size: 0;
}
.card{
margin: 0 10px;
width: 250px;
text-align: left;
display: inline-block;
font-size: medium;
}
.card-img{
width: 250px;
margin-bottom: -5px;
}
.card-title{
background-color: #FFFCF5;
width: 240px;
padding:5px;
margin-bottom: 15px;
color: #282828;
}
.card-title>p>a{
color: #00BFA5;
}
my page looks like this:
but I want to those pictures order side by side
I couldn't that. How could I do? Thank you
3 answers
solution1
3 ACCPTED 2017-09-15 12:41:14
You got .cards inside you while loop, take it out:
<body>
<div class="cards">
<?php include ("connect.php");
$data = $db->query("select * from videos order by id desc");
$data ->execute();
while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><a href="#"><?php echo $row['v_models'];?></a></p>
</div>
</div>
<?php }?>
</div>
</body>
The reason your code doesnt work, is because .card is inline-block which will place multiple card nexto eachother, but because you look the .cards (note the S) as well, you wrap each item in a div. A div is a block element, which means it'll take up one whole row, the next element will fall below it.
solution2
1 2017-09-15 12:43:58
For each row from database you parse, you will have this following output:
`
<div class="cards">
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><a href="#"><?php echo $row['v_models'];?></a></p>
</div>
</div>
</div>
`
So, all you have to do is to have the cotainer outside the while loop, like this:
`
<div class="cards">
<?php include ("connect.php");
$data = $db->query("select * from videos order by id desc");
$data ->execute();
while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><a href="#"><?php echo $row['v_models'];?></a></p>
</div>
</div>
<?php }?>
</div>
`
solution3
0 2017-09-15 12:42:10
I know it's not exactly what you want, but try :
cards { display : flex ; flex-direction : row ; justify-content : space-between }
/ ! \\ Doesn't work on IE8 and previous
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.