Horizontal order

HTML-CSS
1

How to sort this image gallery in Horizontal form.
I mean in each line 3, or 4 element.

 <!DOCTYPE html>
 <!DOCTYPE html>
 <html>
 <head>
  <link rel="stylesheet" type="text/css" href="final.css">

div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;

}

div.container {
  padding: 10px;

}
   <title>photo web</title>
 </head>
 <body>
 
 





 <div class="polaroid"> <div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/79589134-3b546f00-80d5-11ea-8e03-4b59d3f64792.jpg"alt="ORD" style="width:100%">
  <div class="container">
    <p>Chicago</p>
  </div> </div><br>


  <div class="polaroid"><div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/80262249-248db980-868d-11ea-993c-c49fe567bece.jpg"alt="NRT" style="width:100%">
  <div class="container">
    <p>Tokyo</p>
  </div></div><br>
  
  <div class="polaroid"><div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/79598317-07cd1100-80e4-11ea-8876-40c176dc573a.jpg"alt="LAX" style="width:100%">
  <div class="container">
    <p>Los Angeles</p>
  </div></div><br>
  
  <div class="polaroid"> <div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/79598447-3fd45400-80e4-11ea-89a1-4a2c90083aaa.jpg"alt="CMB" style="width:100%">
  <div class="container">
    <p>Hikkaduwa</p>
  </div></div><br>
  
  <div class="polaroid"><div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/79598504-5f6b7c80-80e4-11ea-8246-bd1cb3a66eff.jpg"alt="Havana" style="width:100%">
  <div class="container">
    <p>Havana</p>
  </div></div><br>

  
  <div class="polaroid"><div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/79598775-cd17a880-80e4-11ea-837a-e571e54a5786.jpg"alt="NYC"style="width:100%">
  <div class="container">
    <p>New York</p>
  </div></div><br>

  
  <div class="polaroid"><div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/79598878-f1738500-80e4-11ea-9ae3-ceac7e3e89f4.jpg"alt="BOM" style="width:100%">
  <div class="container">
    <p>Mumbai</p>
  </div></div><br>
  

  <div class="polaroid"><div class="responsive"><img src="https://user-images.githubusercontent.com/52472445/79605221-c7739000-80ef-11ea-8913-1864adff7b81.jpg" alt="ZRH" style="width:100%">
  <div class="container">
    <p>Zürich</p>
  </div></div>
</div> <br>







</body>
 </html>
2

use display flex for this problem.
this link help u: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1 Like
3

I tried everything, still I didn’t get the right display ( horizontal view ) Photo gallery should be next each other not under each other !!

 <!DOCTYPE html>
 <html>
 <head>
  <link rel="stylesheet" type="text/css" href="final.css">
   <title>photo web</title>
 </head>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  flex-direction: row;
  display: flex;
  padding: 0.5em;
  margin: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  
  
  
}

div.container {

  flex-direction: row;
  display: flex;
  padding: 0.5em;
  margin: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;


}
 <body>
 
 





 <div class="polaroid"> <img src="https://user-images.githubusercontent.com/52472445/79589134-3b546f00-80d5-11ea-8e03-4b59d3f64792.jpg"alt="ORD" style="width: 100%">
  <div class="container">
    <p>New York</p>
  </div> </div>


  <div class="polaroid"><img src="https://user-images.githubusercontent.com/52472445/80262249-248db980-868d-11ea-993c-c49fe567bece.jpg"alt="NRT" style="width:100%">
  <div class="container">
    <p>Tokyo</p>
  </div></div>
  
  <div class="polaroid"><img src="https://user-images.githubusercontent.com/52472445/79598317-07cd1100-80e4-11ea-8876-40c176dc573a.jpg"alt="LAX" style="width:100%">
  <div class="container">
    <p>Los Angeles</p>
  </div></div>
  
  <div class="polaroid"><img src="https://user-images.githubusercontent.com/52472445/79598447-3fd45400-80e4-11ea-89a1-4a2c90083aaa.jpg"alt="CMB" style="width:100%"> 
  <div class="container">
    <p>Hikkaduwa</p>
  </div></div>
  
  <div class="polaroid"><img src="https://user-images.githubusercontent.com/52472445/79598504-5f6b7c80-80e4-11ea-8246-bd1cb3a66eff.jpg"alt="Havana" style="width:100%">
  <div class="container">
    <p>Havana</p>
  </div></div>

  
  <div class="polaroid"><img src="https://user-images.githubusercontent.com/52472445/79598775-cd17a880-80e4-11ea-837a-e571e54a5786.jpg"alt="NYC"style="width:100%">
  <div class="container">
    <p>New York</p>
  </div></div>

  
  <div class="polaroid"><img src="https://user-images.githubusercontent.com/52472445/79598878-f1738500-80e4-11ea-9ae3-ceac7e3e89f4.jpg"alt="BOM" style="width:100%">
  <div class="container">
    <p>Mumbai</p>
  </div></div>
  

  <div class="polaroid"><img src="https://user-images.githubusercontent.com/52472445/79605221-c7739000-80ef-11ea-8913-1864adff7b81.jpg" alt="ZRH" style="width:100%">
  <div class="container">
    <p>Zürich</p>
  </div></div>
</div> <br>







</body>
 </html>
4

I think you need to make a container for your divs, and set that container to display flex, then your divs that are inside the container will switch views.
Hope this helps! : )

1 Like