CSS列响应式设计

Question

I have div elements with all with specified unknowen heights. Now I want to create an responsive design by putting them in 1<=n<=4 rows.

<div id="timeline">
     <div class="entry" style="height: (any height e.g. 222px)">
         <div class="background"></div>
         <div class="image"></div>
         <div class="entrytext">sometext</div>
     </div>
     <div class="entry" style="height: (any height e.g. 174px)">
         <div class="background"></div>
         <div class="image"></div>
         <div class="entrytext">sometext</div>
     </div>
     .
     .
     .
</div>

jsFiddle here

---

I tried:

.entry { display: inline-block }

problem: too much unused space because of the heights that not the same

.entry { float: left }

problem: same problem as by display:inline-block

#timeline { column-count: n (e.g 3) }

problem sorting from top to bottom not from left to right

---

How can I sort them from left to right in a horizantal order?

---

1 row:

1
2
3
.
.

---

2 rows:

1 2
3 4
5 6
.
.

---

3 rows:

1 2 3
4 5 6
7 8 9
.
.
.

---

4 rows:

01 02 03 04
05 06 07 08
09 10 11 12
.
.

Answer 1

It's a little hard to pinpoint without any markup, but can you try using Flexbox? Flexbox will ensure they maintain the same height, and flow correctly. Something along the lines of the following:

.container { // #timeline in your case yes?
    display: flex;
    flex-wrap: wrap;
}

.entry {
    width: 100%; // Shouldn't actually need this declaration

    @from 2 { // Replace with your breakpoint
        width: calc(100% / 2);
    }

    @from 3 { // Replace with your breakpoint
        width: calc(100% / 3);
    }

    @from 4 { // Replace with your breakpoint
        width: calc(100% / 4);
    }
}

You'll need to use prefixed versions (or Autoprefixer), and the correct media queries.