來自foreach循環的彼此相鄰的圖像

Question

從PHP的while循環中選擇圖像時，我想將圖像彼此相鄰放置。

因此，目前看起來像這樣http://prntscr.com/7tb42j

而且我希望將圖像彼此相鄰放置。

我的foreach循環如下所示：

<div id='profile-album'>
<?php 
    $get_fotos = "SELECT * FROM fotos_profile WHERE username=:username LIMIT 4";
    $stmt = $db->prepare($get_fotos);
    $stmt->bindParam(':username', $username);
    $stmt->execute();

    foreach($stmt as $row)
    {
        $pic = $row['pic'];
        $title_foto = $row['title'];
?>
    <div id='album-foto-1'><img src="userdata/profile_fotos/<?php echo $pic; ?>" height='100px' width='206px' style='padding-right: 6px'/></div>

   <?php } ?>

Answer 1

您只需要在每個包含圖片的div中添加display:inline-block即可。

<div id='profile-album'>
<?php 
    $get_fotos = "SELECT * FROM fotos_profile WHERE username=:username LIMIT 4";
    $stmt = $db->prepare($get_fotos);
    $stmt->bindParam(':username', $username);
    $stmt->execute();

    foreach($stmt as $row)
    {
        $pic = $row['pic'];
        $title_foto = $row['title'];
?>
    <div id='album-foto-1' style="display:inline-block"><img src="userdata/profile_fotos/<?php echo $pic; ?>" height='100px' width='206px' style='padding-right: 6px'/></div>

   <?php } ?>

Answer 2

確保在“相冊照片”上設置了css（請參見下面為什么我使用相冊照片而不是相冊照片1）：

.album-foto {
    display:inline; // or inline-block depending how you want to be displayed
}

另外，如果要顯示多張圖像，則應為圖像使用一個不是ID的類，因為重復相同的ID效果不好：

  foreach($stmt as $row)
    {
        $id = $row["id"]; // or whatever your ID field is
        $pic = $row['pic'];
        $title_foto = $row['title'];
?>
    <div class='album-foto' id='album-foto-<? echo $id; ?>'><img src="userdata/profile_fotos/<?php echo $pic; ?>" height='100px' width='206px' style='padding-right: 6px'/></div>

   <?php } ?>