Stick all children div close to each other

Question

I am using bootstrap . Loading div(s) inside loop with some data that can be short or long .

I have observed following issue :
Unwanted space here

The images shows some unused / unwanted space between the div(s) .

As there are div(s) with different height , how can it possible to overcome this issue and stick each children div to closet of other ?

The following code is running in loop ,

HTML structure :

<div class="container-fluid">
 <div class="col-lg-12">
  <div class="row">
    //loop begins
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-body">
           //Some short or very long content here .
        </div>
      </div>
    <div>
    //loop ends
  </div>
 </div>
</div>

My study :

Floating DIV's to fill unused space

Tried but not working for me.

Some Hack :

When all children div are of same height such issue doesn't happen.

In my case , setting fixed height to children div(s) is not the solution.

Can any one guide me about this ? May be some article ?

Answer 1

A better way to solve this is that you have to add

 read more

into div if the text content in div is longer than the other div. When user click

read more

you can pop the div up using bootstrap modal and show all the text ontent in it.

Answer 2

If the order of the divs doesn't matter much you could use CSS columns:

 .row.columns { -webkit-columns: 3; -moz-columns: 3 columns: 3 } .row.columns > .col-md-4 { width: 100%; } @media (max-width: 991px) { .row.columns { -webkit-columns: 1; -moz-columns: 1; columns: 1; } } 

 <div class="row columns"> //loop begins <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-body"> //Some short or very long content here . </div> </div> <div> //loop ends </div> 

The looped items will be set like text in a newspaper, on 3 columns, on devices wider than the md breakpoint (which is 992px , by default, in Bootstrap).

Here's a more elaborate article on this technique.

---

Another option is to just use Masonry plugin. Add an id to the parent (the .row in your example) and simply use:

$('#yourId').masonry();

inside the load event of your $(window) . You can also use a class, but it doesn't make sense to use a class if you want to target a single element in the page.

Note: I'm not recommending Masonry, but it's popular. Other options are Isotope, Bootstrap-Waterfall and the Pinterest script, which you'll find a few articles about, however, it usually requires a bit of work to apply to a specific layout/case and I don't think anyone wrapped it up as a plugin yet. I might be wrong, though. (Re)search it.

Answer 3

 #wrapper { width: 90%; max-width: 1100px; min-width: 800px; margin: 50px auto; } #columns { -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-fill: auto; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-fill: auto; column-count: 3; column-gap: 15px; column-fill: auto; } .pin { display: inline-block; background: #FEFEFE; border: 2px solid #FAFAFA; box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4); margin: 0 2px 15px; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 15px; padding-bottom: 5px; background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9); opacity: 1; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; } .pin img { width: 100%; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 5px; } .pin p { font: 12px/18px Arial, sans-serif; color: #333; margin: 0; } @media (min-width: 960px) { #columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } } @media (min-width: 1100px) { #columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } } 

 <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <div id="wrapper"> <div id="columns"> <div class="pin"> <img src="https://i.stack.imgur.com/wNFMT.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/WI5v7.png" /> <p> Donec a fermentum nisi. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/OolSV.png" /> <p> Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/jCeyC.png" /> <p> Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/BJ4Yu.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/P2inO.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/CngES.png" /> <p> Nullam eget lectus augue. Donec eu sem sit amet ligula faucibus suscipit. Suspendisse rutrum turpis quis nunc convallis quis aliquam mauris suscipit. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/VBGuW.png" /> <p> Nullam eget lectus augue. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/DCW6N.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/cvc9X.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/0ADAv.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/z3SWx.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/6Hbcm.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/ILtM0.png" /> <p> Donec a fermentum nisi. Integer dolor est, commodo ut sagittis vitae, egestas at augue. Suspendisse id nulla ac urna vestibulum mattis. </p> </div> <div class="pin"> <img src="https://i.stack.imgur.com/IjihF.png" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. </p> </div> </div> </div> <script src="assets/js/jquery.min.js"></script> <script src="assets/bootstrap/js/bootstrap.min.js"></script>