Può CSS gestire questa situazione clessidra-like?

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

  •  21-09-2019
  •  | 
  •  

Domanda

Sto avendo un momento difficile pensare una soluzione al seguente problema.
Lasciatemi illustrare in primo luogo:

interfaccia di navigazione - clessidra come

Situazione
Ho 26 articoli (in questo esempio, in generale, il numero non è noto ..), ma solo il 12 può essere visibile in una sola volta .. Ho anche alcuni elementi di navigazione (le scatole verdi)

Larghezza di scatole viola e verde è fisso, ma un'altezza di viola può variare in base al contenuto ..

Tutto è normale e posso farlo con i CSS.

Se si utilizza una lista non ordinata (di articoli fluttuavano) per i miei articoli e ho designato i primi due elementi <li> come quelli di navigazioni. In primo luogo ha galleggiare a sinistra e la seconda a destra galleggiante. E tutte le opere e il flusso del resto degli elementi va tra i due più verdi.

problema
Ma ora ho bisogno gli elementi verdi di essere in seconda fila (o durare se quel concetto aiuta come ci saranno solo due file)

Voglio essere in grado di nascondere i primi elementi X e mostrare il prossimo X e cadono in posizione da soli ..

Per riformulare la domanda, posso posizionare alcuni elementi (verdi) in modo da controllare la loro posizione, ma ancora permettere loro di interferire con il flusso da loro nuove posizioni?

Spero che questo sia chiaro. Se non chiedere via e io fornirà quante più informazioni possibile ..

cose che ho provato che non ha funzionato

  • spostamento dell'elemento verde con margini inferiori negativi o positivi margini superiore. Essi si muoveranno dal loro posto, ma gli altri elementi non riempiranno nella loro posizione.
  • Utilizzando posizione assoluta, ma poi gli elementi sono completamente rimosso dal flusso e non incidere sugli altri elementi modo che si sovrappongono con gli altri elementi ..

[ sono in grigio elementi sono nascosti, ho solo mostrare loro in modo da sapere che esistono .. ]

Alcuni codice per ottenere iniziare 

<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>
È stato utile?

Soluzione

OK, ovviamente, questo non può essere risolto solo con Css / Html ..

Quindi, per risolverlo, ho usato un po 'di CSS (con inline-block crossbrowser ) e alcuni jQuery per spostare i pulsanti di navigazione intorno in modo da rimanere sempre al punto che voglio loro ..

Per avere un riferimento qui è la soluzione ..

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

Ci sono un paio di valori hardcoded all'interno, ma lascio a tutti coloro che potrebbero prendere qualcosa di nuovo da questo ...

Grazie a tutti per la guida:)

Esempio di applicazione ( per chi vuole vederlo in azione ): http://www.jsfiddle.net/gaby/Ba3UT/

Altri suggerimenti

Può essere vale la pena di utilizzare javascript per una situazione questo complesso. Librerie come jQuery può rendere abbastanza indolore. La definizione di queste regole di confezionamento in modo esplicito nel js sarà più chiaro e più facile da gestire rispetto farlo implicitamente con un sacco di regole CSS.

Fare la li tranne quelli di navigazione come display: inline-block e forse spostare il li navigazione alla fine della lista?

Senza vedere il codice non posso essere sicuro. Tuttavia, avete provato a mettere gli elementi verdi in tag e marcatura loro come clear: both ;? Questo li potrebbe trasferirsi in una terza fila però. E 'qualcosa che si dovrebbe checkout.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top