0

I'm dropping support for IE9 and starting to use css3 Flex property. Right now, I have created some layout with help of bootstrap 3 and flex property.

I have 2 groups of divs - col-sm-8 and col-sm-4. Every one of them hold image (width and height also proportional - all is proportional), but I can't move pink boxes to move up to fill empty space.

enter image description here

Css is simple (Less style):

.deals {
      display: flex;
      flex-wrap: wrap;
      [class^="col-"] {
        align-self: flex-start;
        margin: 0;
        padding: 0;
        float: none;
      }
    }

Below html:

<div class="container-fluid">
        <div class="row deals">
            <div class="col-sm-8">
                <img src="images//1.jpg" alt="">
            </div>
            <div class="col-sm-4">
                <img src="images//2.jpg" alt="">
            </div>
            <div class="col-sm-4">
                <img src="images//3.jpg" alt="">
            </div>
            <div class="col-sm-8">
                <img src="images//4.jpg" alt="">
            </div>
            <div class="col-sm-4">
                <img src="images//5.jpg" alt="">
            </div>
            <div class="col-sm-4">
                <img src="images//10.jpg" alt="">
            </div>
            <div class="col-sm-8">
                <img src="images//6.jpg" alt="">
            </div>
            <div class="col-sm-4">
                <img src="images//9.jpg" alt="">
            </div>
            <div class="col-sm-4">
                <img src="images//8.jpg" alt="">
            </div>
            <div class="col-sm-4">
                <img src="images//7.jpg" alt="">
            </div>
        </div>
    </div>

Question is - Is this possible to move those pink divs up, to fill empty space?

Thanks.

Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
user3573535
  • 545
  • 2
  • 7
  • 29

1 Answers1

-1

for this purpose you need a masonry style plugin .. you can use isotope masonry for this http://isotope.metafizzy.co/layout-modes/masonry.html

rmarif
  • 548
  • 4
  • 12
  • I've tried, but masonry often leaves small gaps between divs / images . – user3573535 Sep 08 '16 at 10:28
  • @user3573535 maybe if you already tried it and the gaps are your only issue, this answer would help you to get rid of them: http://stackoverflow.com/a/19038859/3569246 – JoannaFalkowska Sep 08 '16 at 10:50
  • I'm looking for Flex solution, not javascript in this question. – user3573535 Sep 08 '16 at 10:52
  • you cant do this without restructuring HTML .. you need 2 containers.. one will contain the vertical image and the other will take small images .. – rmarif Sep 08 '16 at 12:57