-----
Phần 91. PDO
– hiển thị dạng lưới
Xem và làm theo clip số 17 của thầy Nguyễn Anh Tuấn:
Để thay đổi kích thước của một div theo nội dung, thiết lập
“display: inline-block”
Khi “display: inline-block”, để căn giữa: thiết lập cho phần
tử cha của nó là “text-align: center”
Lưu lại đoạn mã để tiện tham khảo:
default.css
body { background:
#ccc; text-align: center;}
h1 { text-align: center; color:
#F00;}
#main { width: 750px; border:
#f00 solid 1px; background: #fff; display: inline-lock;}
.khung { width: 200px; height: 300px; border: #999 solid
1px; padding: 10px; margin: 10px; float: left;
}
img.cangiua { display:
block; margin-left: auto; margin-right: auto; }
.khung img { width: 150px;}
.tenmon { text-align: center; font-weight: bold;}
.gia { color:
#D98A17;}
danh_sach_mon_an.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Danh
sách món ăn</title>
<link
rel="stylesheet" href="default.css">
</head>
<?php
include("connection.php");
$sql =
"SELECT ma_mon,ten_mon,noi_dung_tom_tat,don_gia,hinh FROM mon_an";
$stmt =
$pdo->prepare($sql);
$stmt->execute();
if($stmt->rowcount()
> 0){
$mon_an
= $stmt->fetchAll(PDO::FETCH_OBJ);
}
?>
<body>
<div id="main">
<h1>Danh
sách món ăn </h1>
<?php
for($i = 0;
$i < count($mon_an); $i++) {
?>
<div
class="khung">
<img
class="cangiua" src="<?php echo $mon_an[$i]->hinh;
?>" alt="Hình">
<p
class="tenmon"><?php echo $mon_an[$i]->ten_mon;
?></p>
<p><?php
echo $mon_an[$i]->noi_dung_tom_tat; ?></p>
<p
class="gia">Giá:<?php echo
number_format($mon_an[$i]->don_gia); ?> VNĐ</p>
</div>
<?php
}
?>
</div>
<?php
$pdo->NULL;
?>
</body>
</html>
-----------
Cập nhật 24/2/2017
-----------