Search code examples
htmlcsslayoutpresentation

Vertical and Horizontal alignment

I am designing an html page where I need to display my inserted images. I want the arrangement of images in such a way :

Image1 Image2 Image3    
Image4 Image5 Image6    
Image7 Image8 Image9

<html>
 <head>
  <title>Display Images</title>
 </head>
 <body>
  {% for image in images %}
    <div> 
      <img src={{ self.item_.images }}>
     </div>
  {% endfor %}
 </body>
<html>

All the images there after aligns in the same order. First row with three images, then automatically break, then next row.

Please help. Best Regards

Solution

  • Simply float every image left...then clear after every third image in order to force the next three to a new line.

    You can use the CSS nth-child selector for this, as outlined below. This escapes the need for setting specific widths for each image, and a parent container.

    Demo Fiddle

    CSS

    img{
    float:left;
}
img:nth-child(3n+1){
    clear:left;
}