CODEWITHSUNDEEP
phphtmlcss
Chris
Chris

Reputation: 1654

Images next to each other from a foreach loop

I'd like to put images next to each other when they are selected from a while loop in PHP.

So, currently it looks like this http://prntscr.com/7tb42j

And I'd like it to put the images next to each other.

My foreach loop looks like this:

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

Upvotes: 1

Views: 1664

Answers (2)

William
William

Reputation: 11

Make sure on "album-foto" you have the css set for (see below why I use album-foto not album-foto-1): 

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

Also if you're displaying multiple images you should use a class not an ID for the images as duplication of the same ID is not good:

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

Upvotes: 0

Abozanona
Abozanona

Reputation: 2295

You'll just need to add display:inline-block to each div that contains a picture.

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

Upvotes: 2

Related Questions