CSS可以处理这种类似沙漏的情况吗？

Question

CSS可以处理这种类似沙漏的情况吗？

Gab*_*oli 5 html css hourglass

我很难想到解决以下问题的方法.
让我先说明一下:

情况
我有26个项目(在这个例子中,一般来说数字是未知的..)但是一次只能看到12个..我也有一些导航元素(绿色框)

紫色和绿色盒子的宽度是固定的,但紫色的高度可以根据内容而变化.

一切正常,我可以用css做.

我正在为我的项目使用无序列表(浮动项目),并且我已将前两个<li>元素指定为导航项目.首先是左浮动,第二浮右.这一切都有效,其余项目的流程介于两个绿色项目之间.

问题
但是现在我需要将绿色项目放在第二行(或者如果该概念有用则为最后一行,因为只有两行)

我希望能够隐藏前X个元素并显示下一个X并且它们自己落在了位置上.

为了重新解释这个问题,我能否以某种方式定位一些元素(绿色元素)来控制它们的位置,但仍允许它们干扰来自新位置的流量？

我希望这很清楚.如果不问,我将提供尽可能多的信息..

我试过的东西没用

移动具有负底边距或正顶边距的绿色项目.他们将离开他们的位置,但其他元素将不会填补他们的位置.
使用绝对位置,然后元素完全从流中移除,它们不会影响其他元素,因此它们与其他元素重叠.

[ 他们灰色的项目是隐藏的,我只是展示他们,所以你知道他们存在.. ]

一些代码可以帮助您入门

<style type="text/css">
    ul,li{padding:0;margin:0; list-style-type:none;}
    ul{
        width:155px;
        position:relative;
        height:125px;
        border:1px solid red;
    }
    li{
        float:left;
        background-color:purple;
        margin-left:5px;
        margin-top:5px;
        width:25px;
        text-align:center;
        line-height:25px;
        color:white;
    }
    .prev{
        color:black;
        background-color:green;
    }
    .next{
        color:black;
        float:right; 
        margin-right:5px;
        background-color:green;
    }
</style>

Run Code Online (Sandbox Code Playgroud)

和

<body>
    <ul>
        <li class="prev">&lt;</li>
        <li class="next">&gt;</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
    </ul>
</body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Gab*_*oli 5

好吧显然这只能通过Css/Html来解决.

So, to solve it, i used some CSS (with inline-block crossbrowser) and some jQuery to move the navigation buttons around so they stay always at the point i want them..

For reference here is the solution ..

CSS

<style type="text/css">
    ul,li{padding:0;margin:0; list-style-type:none;}
    #performances{
        width:155px;
        border:1px solid red;
        line-height:0;
        font-size:0;
    }
    #performances li{
        font-size:12px;
        background-color:purple;
        margin-left:5px;
        margin-bottom:5px;
        margin-top:5px;
        width:25px;
        text-align:center;
        line-height:25px;
        color:white;
        display:none;
        vertical-align:top;
    }
    #performances .prev{
        color:black;
        background-color:green;
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .next{
        color:black;
        background-color:green;
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .shown{
        display: -moz-inline-stack;
        display:inline-block;
    }
    #performances .placeholder{visibility:hidden;}
</style>
<!--[if lte IE 7]><style>
    #performances .prev,#performances .next,#performances .shown{zoom:1;*display:inline;}
</style><![endif]-->

Run Code Online (Sandbox Code Playgroud)

Javascript (jQuery )

<script type="text/javascript">
    function resetNextPrev( ){
        $next.insertAfter('#performances li.shown:eq('+ ($perpage-1) +')');
        $prev.insertAfter('#performances li.shown:eq('+ ($perline-1) +')');
    }
    $(document).ready(function(){
        $perpage = 8;
        $perline = ($perpage+2) / 2;
        $page = 1;
        $itemcount = $('#performances li.performance').length;
        $pages = Math.ceil ( $itemcount / $perpage);
        $next = $('#performances li.next');
        $prev = $('#performances li.prev');

        $('#performances li.performance').slice(0,$perpage).addClass('shown');

        if (($pages * $perpage) > $itemcount )
                for (var i =0;i< ($pages * $perpage)-$itemcount;i++) 
                        $('<li class="performance placeholder">test</li>').appendTo('#performances');
        resetNextPrev();

        $('li.next').click(function(){
            if ($page < $pages)
                $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (++$page-1),$perpage * $page).addClass('shown');
            resetNextPrev( $perline );

        });
        $('li.prev').click(function(){
            if ($page > 1)
                $('#performances li.performance').filter('.shown').removeClass('shown').end().slice($perpage * (--$page-1),$perpage * $page).addClass('shown');
            resetNextPrev( $perline );

        });
    });
</script>

Run Code Online (Sandbox Code Playgroud)

.. and the HTML

    <ul id="performances">
        <li class="prev">&lt;</li>
        <li class="next">&gt;</li>
        <li class="performance">1</li>
        <li class="performance">2</li>
        <li class="performance">3</li>
        <li class="performance">4 dfs s sf</li>
        <li class="performance">5</li>
        <li class="performance">6</li>
        <li class="performance">7</li>
        <li class="performance">8</li>
        <li class="performance">9</li>
        <li class="performance">10</li>
        <li class="performance">11</li>
        <li class="performance">12</li>
        <li class="performance">13</li>
        <li class="performance">14</li>
        <li class="performance">15</li>
        <li class="performance">16</li>
        <li class="performance">17</li>
        <li class="performance">18</li>
        <li class="performance">19</li>
    </ul>

Run Code Online (Sandbox Code Playgroud)

There are a couple of hardcoded values inside, but i will leave it for anyone that might pick up something new from this ...

Thanks to all for the guidance :)

Working example (for whoever want to see it in action) : http://www.jsfiddle.net/gaby/Ba3UT/

归档时间：	16 年，1 月前
查看次数：	1066 次
最近记录：	7 年，8 月前