求助：用 Uikit 建一个瀑布流时第一个 box 异常显示

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

PageSpeed 相关文档

› 为 NGINX 编译 PageSpeed 支持

› ngx_pagespeed

› Configuring mod_pagespeed Filters

加载性能测试工具

› WebPagetest

› Gomez

这是一个创建于 3276 天前的主题，其中的信息可能已经有所发展或是发生改变。

HMTL:

<div class="uk-grid uk-flex uk-flex-item-auto">
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#5d925b;">Box1Box1Box1Box1Box1Box1Box1</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box"       style="background:#345233;">Box2Box2Box2Box2Box2Box2Box2Box2Box2Box2Box2Box2Box2Box2</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#893742;">Box3Box3Box3Box3Box3Box3Box3Box3Box3Box3</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#cc1133;">Box4</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#1a4344;">Box5</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#443f14;">Box6</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#244424;">Box7</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#0e0d44;">Box8</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#441520;">Box10</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#442429;">Box11</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#345233;">Box12</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#893742;">Box13</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#cc1133;">Box14</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#1a4344;">Box15</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#443f14;">Box16</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#244424;">Box17</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#0e0d44;">Box18</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#2f440e;">Box19</div></div>
        <div class=" uk-grid-medium " ><div class="uk-panel uk-panel-box" style="background:#441520;">Box20</div></div>
    </div>

![Alt test][flex photo]
![Alt test][box1]
![Alt test][box8]

第 1 条附言 · 2015-12-07 22:53:52 +08:00

想试试用 Uikit 的 flex 和网格做瀑布流的 demo 遇到了个问题， box2-box20 的高度都是 50px ， box1 的高度却是 75px ，如果把 box1 删掉 box2 的高度就会是 75px 。

后来发现.uk_grid:before 选择器的高度是 75px （不过.uk_grid:before 选择器并没对 height 设置值），不知有什么关系。

求高手帮忙解答解答。

目前尚无回复

div class uk-panel background