html - css列响应式设计

Question

我有 div 元素，所有元素都具有指定的未知高度。 现在我想通过将它们放在 1<=n<=4 行中来创建响应式设计。

<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

---

我试过:

.entry { display: inline-block }

问题:由于高度不一样，未使用的空间太多

.entry { float: left }

问题:与 display:inline-block 相同的问题

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

问题排序不是从左到右而是从上到下

---

如何按水平顺序从左到右对它们进行排序？

---

1 行:

1
2
3
.
.

---

2 行:

1 2
3 4
5 6
.
.

---

3 行:

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

---

4 行:

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

Answer 1

在没有任何标记的情况下很难精确定位，但是您可以尝试使用 Flexbox 吗？ Flexbox 将确保它们保持相同的高度，并正确流动。大致如下:

.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);
    }
}

您需要使用带前缀的版本(或 Autoprefixer)和正确的媒体查询。