Will Barangi Will Barangi - 2 months ago 7
CSS Question

Display images side by side php & css

Hey I have written some code to display pictures using php...However, the images are showing up as block and taking up the whole width of the screen when I would like to display them inline but with the words describing the books right below them. Can you please help me set this up
here is my code

for($row = 0; $row < sizeof($arr);$row++){
echo '<img src="images/'.$arr[$row]['isbn'].'.jpg" alt="Mountain View" >'.$arr[$row]['title'].'<br/>by '.$arr[$row]['author'].'<br/><input type="radio" name="booktype" value="hardcover" >Hardcover: $'.$arr[$row]['hardcover'].'<br/><input type="radio" name="booktype" value="softcover" >Softcover: $'.$arr[$row]['softcover'].'<br/><input type="radio" name="booktype" value="e-book" >E-Book: $'.$arr[$row]['e-book'];


}

Again I would like the images to appear side by side not block...thank you..

okay I followed the code suggested for both of them the one that seemed to work was when I float everything left, but the words are appearing on the side when I do this..I have attached a picture..how can I fix this
enter image description here

Answer

You can add container div to contain each column or your images and give this div display:inline-block;

so your code will be

for($row = 0; $row < sizeof($arr);$row++){
 echo '<div class="img_container"><img src="images/'.$arr[$row]['isbn'].'.jpg" alt="Mountain View" ><br>'.$arr[$row]['title'].'<br/>by '.$arr[$row]['author'].'<br/><input type="radio" name="booktype" value="hardcover" >Hardcover: $'.$arr[$row]['hardcover'].'<br/><input type="radio" name="booktype" value="softcover" >Softcover: $'.$arr[$row]['softcover'].'<br/><input type="radio" name="booktype" value="e-book" >E-Book: $'.$arr[$row]['e-book'].'</div>';
}

and css

.img_container{
  display:inline-block;
  margin-right:5px;
}

i make this Demo with dummy data in js as i can't do it with php

Comments