user7047368 user7047368 - 1 month ago 12
CSS Question

How to Display images horizontally in html

I need to display the images horizontaly. All the images are fetching from admin panel. Here is the code, But here all the images are displaying vertically.

<div class="portfolioimages"><img src="image.png"/></div>
<div class="portfolioimages"><img src="image1.png"/></div>
<div class="portfolioimages"><img src="image2.png"/></div>
<div class="portfolioimages"><img src="image3.png"/></div>
<div class="portfolioimages"><img src="image4.png"/></div>
<div class="portfolioimages"><img src="image5.png"/></div>
<div class="portfolioimages"><img src="image6.png"/></div>
<div class="portfolioimages"><img src="image7.png"/></div>
<div class="portfolioimages"><img src="image8.png"/></div>


Here is the fiddle link

https://jsfiddle.net/2wzh1mk7/

<?php if(isset($records2) && is_array($records2)):?>
<?php foreach ($records2 as $r):?>
<div class="blog1">
<img src="<?php echo base_url();?>admin/images/blogimages/thumbs/<?php echo $r->image_path;?>" class="testimonials1"/>

</div>

<?php endforeach ;endif;?>


This is my actual code in php for the clarification i have written in html form. If i give style as display:inline all the images will display in sinlge row but i need to display 3 images in a row.

Answer

Just you need to set float: Left Property on div class.

.portfolioimages{
  float:left;
}

Use counter variable and check. Please check below code for 3 images per row.

<?php 
$cnt = 1;
if(isset($records2) && is_array($records2)):?>
<?php foreach ($records2 as $r):?>          
    <div class="blog1">
        <img src="<?php echo base_url();?>admin/images/blogimages/thumbs/<?php echo $r->image_path;?>" class="testimonials1"/>

    </div>

<?php 
if(($cnt%3) == 0) { echo "<br>"; }
$cnt++;
endforeach ;endif;?>