Align images on each other

Question

I wonder if anyhow know a solution to my headache, i want the third image to be under the first. But as the second image height is larger than the first it creates empty space.

How it looks right now

Code:

Every image code block looks the same

column_1_5_of_3 {
  width: 100%;
}

col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

portimg {
  width: 100%;
  height: auto;
  margin: 0% 0 0% 0%;
  transition: .5s ease;
  display: block;
}

column_1_5_of_3 {
  width: 100%;
}

col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

portimg {
  width: 100%;
  height: auto;
  margin: 0% 0 0% 0%;
  transition: .5s ease;
  display: block;
}

<div class="col_nomargin column_1_of_3">
  <img class="portimg" src="" alt="">

If there is something i have missed or any questions. Please do tell

Thank you for all the help

Welcome to Stack Overflow. Please check this: [How do I ask a good question?](http://stackoverflow.com/help/how-to-ask) — Patrick Mlr, Aug 18 '17 at 09:57
Have a look at this -> https://css-tricks.com/seamless-responsive-photo-grid/ — Dragomir Kolev, Aug 18 '17 at 09:57
Use this jquery plugin, it's align your div automatically. plugin url: http://www.bestjquery.com/?uoa1gOVh — Omar, Aug 18 '17 at 10:02
Hey using "Code Snippet" your answer box enter your full HTML CSS code then you ask the Question Solve your Problem — devadinesh, Aug 18 '17 at 10:05

score 0 · Answer 1 · answered Aug 18 '17 at 10:08

.gal {
 
 
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
   
 
 } 
 .gal img{ width: 100%; padding: 7px 0;}
@media (max-width: 500px) {
  
  .gal {
 
 
 -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
   
 
 }
  
 }

<div class="container">


<h1>Pure Css Responsive Masonry Gallery</h1>
<div class="col-md-12">
<div class="row">
<hr>

 <div class="gal">
 
 <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
 
  <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
  
   <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
   
   <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
   
   
  
   <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
   
   <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
   
    <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
   
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""><img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
     <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
   
      <img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
   
      <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
    <img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
    
 </div>
 
</div>
</div>
</div>

try this code

Please add some information what you've done, why it's working etc.. — Patrick Mlr, Aug 18 '17 at 10:10

score 0 · Answer 2 · answered Aug 18 '17 at 10:18

I've added a class named .photos and added/removed to .portimg some css.

The column-count property specifies the number of columns an element should be divided into and the column-gap property specifies the gap between the columns.

See CSS-Tricks for more informations.

.column_1_5_of_3 {
  width: 100%;
}

.col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

.portimg {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

.column_1_5_of_3 {
  width: 100%;
}

.photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   column-count:         5;
   column-gap:           2px;
}

.col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

.portimg {
  transition: .5s ease;
  display: block;
  margin: 2px;
}

<div class="col_nomargin column_1_of_3 photos">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x200" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x400" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x100" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x600" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x200" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x600" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x100" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x900" alt="">
 </div>

Align images on each other

2 Answers2

Linked