CSS have img on the same column but different line

Question

I'm in a situation since 3 day and I don't have found any answer to my question : how have div on the same width (containing images with a width of 320px) on the column (that's done) but not organize in line ?

Let me join a little sketch to explain that : at the left, it's what I've. At the right, it's what I want. (the second line is for the "media screen" when reducing the width of the screen/navigator : so have 4 to 3 to 2 to 1 (and vice versa). take care of the number of boxes) :

croquis of what I have and what I want

To explain how I've obtain this right part, here are the code :

html:

<div class="box">
<a href="#"><img src="#" alt=""/></a>
</div>

Simply a succession of this class, it can be directly on the body. The box is important because maybe I'll have to had tittles or others things.

css:

.box {
    position: relative;
    float: left;
    min-width: 340px;
    max-width: 24.80%;
    width: 24.79%;
    margin: 20px 0px 20px 0px;
}

@media only screen and (max-width: 1800px) {
    .box {
        min-width: 360px;
        max-width: 33%;
        width: 33%;
    }   
}

To complete this question, here are a restriction : it had to be dynamic and generic (so like that, I just have to make a copy of a div and replace the link of the image (that's before adding php and js), or add anything I want).

check this question http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Ariona Rian, Nov 27 '14 at 13:34
As @ArionaRian suggests, Masonry in my experience is the only portable and out of the box solution to this problem. — DRC, Nov 27 '14 at 13:35
There are other libraries that do the same thing, but a JavaScript option is the only valid one you have at the moment — Zach Saucier, Nov 27 '14 at 13:41

score 1 · Accepted Answer · answered Nov 27 '14 at 13:47

1

You should check out jQuery Masonry (http://masonry.desandro.com), which does exactly what you need.

If you cant use Masonry for some reason, you should first split your page in columns. Then stack div boxes in each column.

answered Nov 27 '14 at 13:47

Dev-an

462
2
6

columns doesn't like a good idea : if you apply columns, the third one of the top right part of my sketch will not transform at the bottom right part of my sketch. – Aridjar Nov 27 '14 at 13:51
Yes, you are correct. For responsive realignment, you should probably use jQuery Masonry. – Dev-an Nov 27 '14 at 14:00
for CSS3 solution, you can use column property. but as we now, it's still not supported in all browser. The best choice for now is using Masonry :) – Ariona Rian Nov 28 '14 at 06:03

SOuřaan Gřg · Answer 2 · 2014-11-27T17:12:25.080

I had just tried to make like that right picture & I made that with seven div and all are in same width plus all picture in it are 320px same on size.I haven't tried with width.No media work I have to learn them too :)

  <body>
    <div id='box1'>1</div>
    <div id='box2'>2</div>
    <div id='box3'>3</div>
    <div id='box4'>4</div>
    <div id='box5'>5</div>
    <div id='box6'>6</div>
    <div id='box7'>7</div>
  </body>


    /* css code!*/

     body
        {   
          margin: 0px;
        }

     #box1
        {
          width:450px;
          height:300px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-color: #da1;
          background-size:320px; 
          position:absolute;
          left:1px; 
        }

     #box2
        {
          width:450px;
          height:380px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          left:451px;
          background-color:#df4;  
        }   

     #box3
        {
          width:450px;
          height:195px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:0px;
          left:901px;
          background-color:#dd6; 
        }   

     #box4
        {
          width:450px;
          height:658px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          left:1px;
          top:300px;
          background-color:#ced; 
        }           

     #box5
        {
          width:450px;
          height:578px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:380px;
          left:451px;
          background-color:#cbb;
         }   

     #box6
         {
          width:450px;
          height:470px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:195px;
          left:901px;
          background-color:#ad9;    
         }

     #box7
         {
          width:450px;
          height:298px;
          background-image: url('sheep.jpg');
          background-repeat: no-repeat;
          background-size: 320px;
          position: absolute;
          top:660px;
          left:901px;
          background-color:#d8f;
         }

CSS have img on the same column but different line

2 Answers2