Ngu ngơ học làm web (91) - PDO – hiển thị dạng lưới

Tiếp theo của: Ngu ngơ học làm web (90) - PDO - thêm dữ liệu vào CSDL
-----

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
-----------
Xem thêm:
Tổng hợp các bài viết về Ngu ngơ học làm web