O CSS pode lidar com esta situação semelhante a uma ampulheta?

StackOverflow https://stackoverflow.com/questions/2096639

  •  21-09-2019
  •  | 
  •  

Pergunta

Estou tendo dificuldade em pensar em uma solução para o seguinte problema.
Deixe -me ilustrar primeiro:

Navigation Interface - Hourglass like

Situação
Eu tenho 26 itens (neste exemplo, em geral o número não é conhecido ..), mas apenas 12 podem ser visíveis ao mesmo tempo .. Eu também tenho alguns elementos de navegação (as caixas verdes)

A largura das caixas roxas e verdes é fixa, mas a altura do roxo pode variar de acordo com o conteúdo.

Tudo é normal e eu posso fazer isso com CSS.

Estou usando uma lista não ordenada (de itens flutuados) para meus itens e designei os dois primeiros <li> elementos como as navegações. Primeiro, flutuando e o segundo flutuar à direita. Tudo funciona e o fluxo do restante dos itens passa entre os dois verdes.

Problema
Mas agora eu preciso que os itens verdes estejam na segunda linha (ou por último, se esse conceito ajudar, pois haverá apenas duas linhas)

Eu quero poder esconder os primeiros X Elements e mostrar o próximo X e eles se posicionam por conta própria.

Para reformular a pergunta, posso posicionar alguns elementos (os verdes) de tal maneira de controlar sua posição, mas ainda permitir que eles interfiram no fluxo de seus novos locais?

Espero que isso esteja claro. Se não for, perguntar e eu fornecerei o máximo de informações possível.

Coisas que tentei que não funcionaram

  • Movendo o item verde com margens inferiores negativas ou margens superiores positivas. Eles vão sair do seu lugar, mas os outros elementos não preencherão sua posição.
  • Usando a posição absoluta, mas os elementos são completamente removidos do fluxo e não afetam os outros elementos, para que se sobreponham com os outros elementos.

[Eles os itens acinzentados estão escondidos, eu apenas os mostro, então você sabe que eles existem ..]

Algum código para você começar 

<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>

e

<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>
Foi útil?

Solução

Ok, obviamente, isso não pode ser resolvido com apenas CSS/HTML ..

Então, para resolvê -lo, usei alguns CSs (com Block inline Browser) e algum jQuery para mover os botões de navegação para que eles fiquem sempre no ponto em que os quero ..

Para referência aqui é a solução ..

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]-->

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>

.. e as 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>

Existem alguns valores codificados por dentro, mas vou deixar para qualquer pessoa que possa pegar algo novo com isso ...

Obrigado a todos pela orientação :)

Exemplo de trabalho (Pois quem quiser ver isso em ação) : http://www.jsfiddle.net/gaby/ba3ut/

Outras dicas

Pode valer a pena usar JavaScript para uma situação neste complexo. Bibliotecas como o JQuery podem torná -lo bastante indolor. Definir essas regras de embalagem explicitamente no JS será mais claro e mais fácil de manter do que fazê -lo implicitamente com muitas regras do CSS.

Faça o li exceto os de navegação como display: inline-block E talvez mova a navegação li até o final da lista?

Sem ver seu código, não posso ter certeza. No entanto, você tentou colocar os elementos verdes em tags e marcando -os como claros: ambos;? Isso pode movê -los para uma terceira fila. É algo que você deve fazer o checkout.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top