Can CSS manejar esta situación reloj de arena?

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

  •  21-09-2019
  •  | 
  •  

Pregunta

Estoy teniendo un momento difícil pensar en una solución para el problema siguiente.
Permítanme ilustrar lo primero:

Interfaz de navegación - reloj de arena como

Situación
Tengo 26 artículos (en este ejemplo, en general no se conoce el número ..), pero sólo 12 pueden ser visibles a la vez .. También tengo algunos elementos de navegación (las cajas verdes)

Anchura de cajas púrpuras y verdes se fija pero la altura de la lata púrpura variará según el contenido ..

Todo es normal y que puedo hacerlo con CSS.

Estoy utilizando una lista desordenada (de elementos flotaban) para mis artículos y he designado a los dos primeros elementos <li> como las navegaciones. En primer lugar tiene flotante a la izquierda y la derecha segundo flotador. Todo funciona y el flujo del resto de los elementos va entre los dos verdes.

Problema:
Pero ahora necesito los objetos de color verde para estar en la segunda fila (o la última si ese concepto ayuda tan sólo habrá dos filas)

Quiero ser capaz de ocultar los primeros elementos X y mostrar el lado X y caen en posición sobre su propio ..

Para reformular la pregunta, ¿Puedo colocar algunos elementos (los verdes), de tal manera de controlar su posición, pero todavía permiten que interfieran con el flujo de sus nuevas ubicaciones?

espero que esto está claro. Si no pregunta de distancia y voy a proporcionar tanta información como sea posible ..

cosas que he intentado que no trabajó

  • mover el elemento verde con márgenes inferiores negativos, o márgenes superior positivos. Ellos se moverán de su lugar, pero los otros elementos no llenarán en su posición.
  • Uso de posición absoluta, pero entonces los elementos se eliminan completamente del flujo y que no afectan a los otros elementos para que se superponen con los otros elementos ..

[ que atenuados elementos están ocultos, sólo muestro para que sepa que existen .. ]

Algunos código para que pueda empezar 

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

y 

<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>
¿Fue útil?

Solución

OK, obviamente, esto no se puede resolver sólo con CSS / HTML ..

Así que, para resolverlo, he usado un poco de CSS (con inline-block crossbrowser ) y un poco de jQuery para mover los botones de navegación en todo para que se mantengan siempre en el punto quiero que ellos ..

Como referencia aquí es la solución ..

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>

.. y la 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>

Hay un par de valores codificados dentro, pero lo dejaré para cualquier persona que pudiera recoger algo nuevo de este ...

Gracias a todos por la guía:)

Ejemplo de trabajo ( para quien quiera verlo en acción ): http://www.jsfiddle.net/gaby/Ba3UT/

Otros consejos

Se puede valer la pena para el uso de JavaScript para una situación de este complejo. Bibliotecas como jQuery puede hacer que sea bastante sencillo. La definición de estas normas de embalaje de manera explícita en js será más claro y más fácil de mantener que lo hace implícitamente con una gran cantidad de reglas CSS.

Hacer que el li excepto las de navegación como display: inline-block y quizás mover el li navegación al final de la lista?

Sin ver su código no puedo estar seguro. Sin embargo, ¿ha intentado poner los elementos verdes en las etiquetas y marcándolos como claro: ambos ;? Esto podría moverlos a una tercera fila sin embargo. Es algo que debe pago y envío.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top