Изображения рядом друг с другом из цикла foreach

Question

Я хотел бы помещать изображения рядом друг с другом, когда они выбраны из цикла while в PHP.

Таким образом, в настоящее время он выглядит как этот http://prntscr.com/7tb42j

И я бы хотел, чтобы поместить изображения рядом друг с другом.

Мой цикл Еогеасп выглядит следующим образом:

<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

Вам просто нужно добавить 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 } ?> 

Answer 2

Убедитесь в "альбом-фото", у вас есть набор CSS для (смотри ниже, почему я использую альбом-FOTO не альбом-фото-1):

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

Кроме того, если вы отображая несколько изображений, вы должны использовать класс, а не идентификатор для изображений, так как дублирование одного и того же 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 } ?>