V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
PageSpeed 相关文档
为 NGINX 编译 PageSpeed 支持
ngx_pagespeed
Configuring mod_pagespeed Filters
加载性能测试工具
WebPagetest
Gomez
atlantismonk
V2EX  ›  前端优化

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

  •  
  •   atlantismonk · 2015-12-07 22:13:25 +08:00 · 2588 次点击
    这是一个创建于 3303 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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]

    <img src="/home/atlantismonk/桌面 /flex_photo.png">
    <img src="/home/atlantismonk/桌面 /box1.png">
    <img src="/home/atlantismonk/桌面 /box8.png">

    第 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 设置值),不知有什么关系。

    求高手帮忙解答解答。
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5138 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 09:39 · PVG 17:39 · LAX 01:39 · JFK 04:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.