来自 foreach 循环的图像彼此相邻答案

【问题标题】：Images next to each other from a foreach loop来自 foreach 循环的图像彼此相邻
【发布时间】：2015-07-16 18:26:42
【问题描述】：

当从 PHP 的 while 循环中选择图像时，我想将它们放在一起。

而且我希望它可以将图像并排放置。

我的 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 } ?>

【问题讨论】：

标签： php html css

【解决方案1】：

您只需将display:inline-block 添加到每个包含图片的 div。

<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 } ?>

【讨论】：

【解决方案2】：

确保您在“album-foto”上设置了 css（请参阅下面为什么我使用album-foto 而不是album-foto-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 } ?>

【讨论】：