Can CSS behandeln diese Sanduhr-ähnliche Situation?

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

  •  21-09-2019
  •  | 
  •  

Frage

Ich habe eine harte Zeit, eine Lösung für das folgende Problem zu denken.
Lassen Sie mich erläutern es zuerst:

Lage
I 26 Elemente haben (in diesem Beispiel im allgemeinen die Zahl ist nicht bekannt ..), aber nur 12 auf einmal sichtbar sein .. ich auch einige Navigationselemente (die grünen Boxen)

Breite von lila und grünen Kästen befestigt ist, aber Höhe von lila kann variiert je nach Inhalt ..

Alles ist normal und ich kann es mit CSS tun.

Ich verwende eine ungeordnete Liste (von schwebten Artikel) für meine Artikel und ich habe die ersten beiden <li> Elemente wie die Navigations diejenigen bezeichnet. Zuerst hat Schwimmer links und zweiten Schwimmer rechts. Alles funktioniert und die Strömung der Rest der Elemente geht zwischen den beiden grünen.

Problem
Aber jetzt brauche ich die grünen Punkte auf der zweiten Reihe zu sein (oder letzte, wenn das Konzept, da es hilft nur zwei Reihen sein wird)

Ich mag die ersten X-Elemente verstecken zu können und zeigen die nächsten X und sie fallen in Position auf ihrem eigenen ..

Um umformulieren die Frage, kann ich einige Elemente positionieren (die grünen) in einer solchen Art und Weise ihre Position zu kontrollieren, aber immer noch erlauben, sie mit dem Strom aus ihren neuen Standorten zu stören?

Ich hoffe, das ist klar. Wenn nicht fragt weg, und ich werde so viele Informationen wie möglich zur Verfügung stellen ..

Dinge, die ich habe versucht, die nicht funktioniert hat

  • Bewegen Sie den grünen Punkt mit negativen unteren Rand oder positive Top-Margen. Sie werden von ihrem Platz bewegen, aber die anderen Elemente werden nicht in ihrer Position füllen.
  • Verwenden absolute Position, aber dann sind die Elemente vollständig aus dem Fluss entfernt und sie wirken sich nicht auf die anderen Elemente, so dass sie überlappen mit den anderen Elementen ..

[ sie abgeblendet Elemente ausgeblendet sind, zeige ich ihnen nur, damit Sie wissen, dass sie existieren .. ]

Einige Code zum Einstieg 

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

und 

<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>
War es hilfreich?

Lösung

OK offensichtlich kann dies nicht nur mit CSS / HTML ..

gelöst werden

Also, um es zu lösen, ich einige CSS verwendet (mit inline-block cross ) und einige jQuery die Navigationstasten, um sich zu bewegen, so dass sie immer an der Stelle bleiben will ich sie ..

Als Referenz hier ist die Lösung ..

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>

.. und die 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>

Es gibt ein paar fest einprogrammierte Werte nach innen, aber ich werde es für jedermann verlassen, die etwas Neues abholen könnte von diesem ...

Danke an alle für die Führung:)

Arbeits Beispiel ( für wollen, wer es in Aktion sehen ): http://www.jsfiddle.net/gaby/Ba3UT/

Andere Tipps

Es kann sich lohnen, diese Anlage für eine Situation zu verwenden JavaScript. Bibliotheken wie jQuery kann es ziemlich schmerzlos. Definition dieser Verpackungsregeln ausdrücklich in js wird klarer und leichter zu pflegen als es implizit mit vielen CSS-Regeln zu tun.

Machen Sie die li mit Ausnahme der Navigations diejenigen als display: inline-block und vielleicht die Navigation li der Liste bis zum Ende bewegen?

Ohne Code zu sehen, kann ich nicht sicher sein. Sie haben jedoch versucht, die grünen Elemente in Tags und markiert sie als klar stellen: beide ;? Dies könnte allerdings sie in eine dritte Reihe bewegen. Es ist etwas, sollten Sie zur Kasse.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top