CSS peut gérer cette situation de diabolo comme?

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

  •  21-09-2019
  •  | 
  •  

Question

Je suis un moment difficile de penser une solution au problème suivant.
Permettez-moi d'illustrer ce premier:

Situation J'ai 26 articles (dans cet exemple, en général, le nombre est inconnu ..) mais seulement 12 peuvent être visibles à un moment .. J'ai aussi quelques éléments de navigation (les cases vertes)

Largeur des boîtes violet et vert est fixe, mais la hauteur de pourpre peut varier en fonction du contenu ..

Tout est normal et je peux le faire avec css.

J'utilise une liste non ordonnée (des objets flottaient) pour mes articles et j'ai désigné les deux premiers éléments de <li> comme ceux de navigations. Tout d'abord flotter a gauche et le second flotteur droit. Il tous les travaux et l'écoulement du reste des éléments passe entre les deux verts.

Problème Mais maintenant je besoin des éléments verts pour être sur la deuxième ligne (ou la dernière si ce concept aide car il n'y aura deux lignes)

Je veux être en mesure de cacher les premiers éléments X et montrer la prochaine X et ils tombent en position sur leur propre ..

Pour reformuler la question, puis-je placer certains éléments (les verts) de telle façon de contrôler leur position tout en leur permettant d'interférer avec le flux de leurs nouveaux emplacements?

J'espère que cela est clair. Sinon demandez loin et je vais fournir autant d'information que possible ..

Les choses que j'ai essayé qui ne fonctionnait pas

  • Déplacement de l'article vert avec des marges inférieures négatives ou positives marges supérieure. Ils se déplaceront hors de leur place, mais les autres éléments ne rempliront pas leur position.
  • Utiliser position absolue, mais les éléments sont complètement retirés de la circulation et ils ne portent pas atteinte aux autres éléments afin qu'ils se chevauchent avec les autres éléments ..

[ ils grisés articles sont cachés, je les montre donc vous savez qu'ils existent .. ]

code pour vous aider à démarrer 

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

et 

<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>
Était-ce utile?

La solution

OK évidemment cela ne peut pas être résolu avec seulement Css / Html ..

Alors, pour le résoudre, je l'ai utilisé un peu de CSS (avec inline-block crossbrowser ) et certains jQuery pour déplacer les boutons de navigation autour afin qu'ils restent toujours au point où je les veux ..

Pour référence est ici la 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]-->

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>

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

Il y a un couple de valeurs à l'intérieur hardcoded, mais je partirai pour quelqu'un qui pourrait prendre quelque chose de nouveau à ...

Merci à tous pour la direction:)

Exemple de travail ( pour tous ceux qui veulent le voir en action ): http://www.jsfiddle.net/gaby/Ba3UT/

Autres conseils

Il peut valoir la peine d'utiliser javascript pour une situation de ce complexe. Les bibliothèques comme jQuery peuvent le rendre assez indolore. La définition de ces règles d'emballage explicitement dans js sera plus clair et plus facile à maintenir que de le faire implicitement avec beaucoup de règles CSS.

Faire le li sauf ceux de navigation comme display: inline-block et peut-être le déplacer li de navigation à la fin de la liste?

Sans voir votre code, je ne peux pas être sûr. Cependant, avez-vous essayé de mettre les éléments verts dans les balises et les marquant comme clear: both ;? Cela peut les déplacer dans une 3ème rangée bien. Il est quelque chose que vous devez votre commande.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top