Ich habe versucht, das Snippet etwas funktionieren zu lassen. Ich fange gerade damit an und ich habe es nur für mein Handy entwickelt. Sie können das Problem sehen, indem Sie auf Projekte und heute klicken.
Ich habe ein div ( #data-container ), das aus zwei divs ( .project, .today ) besteht, und ich möchte, dass diese beiden divs nebeneinander wie Tabs funktionieren. Also, wenn ich auf den jeweiligen Button klicke, wischt es und zeigt das jeweilige div. Ich habe es funktioniert aber mit 2 Problemen.
Wie funktionieren sie? - #data-container hat white-space: nowrap (untergeordnete divs werden nicht umgebrochen und bleiben Seite an Seite und die Verschiebung funktioniert) und die untergeordneten divs ( .project and .today ) sind auf width: 100% und inline-block gesetzt.
Probleme mit diesem
Das data-container muss in der Lage sein, vertikal zu scrollen und kann Text um das aktuell ausgewählte div umschließen, aber white-space: nowrap führt zu einem Überlauf des Textes. Ich habe word-wrap: break-word ausprobiert, es funktioniert nicht. Ich kann es auch schaffen, indem ich display: hidden setze, aber ich möchte, dass die divs wischen.
Ich verstehe nicht, warum dieses Problem passiert. Wenn ich #data-container auf overflow-y: scroll setze, werden die divs horizontal scrollbar, was das ganze System durchbricht.
Ich brauche eine Möglichkeit, um das data-container nur vertikal scrollbar zu machen und Text zu umbrechen.
Jade
%Vor%CSS
%Vor%Animieren mit Javascript
%Vor%
Versuchen Sie Folgendes:
%Vor% Du könntest auch #data-container {overflow-y: auto} betrachten, um die hässliche Bildlaufleiste zu entfernen ... sollte noch einen Bildlauf durchführen.
Eine andere Sache, die Sie tun könnten, ist # 200% Breite und die Kinder 50% Breite zu geben, dann schieben Sie # Datencontainer.
Ich war es müde zu warten und wollte eine Lösung. Es ist in keiner Weise, was ich wollte oder perfekt aber es gibt die Illusion von dem, was ich wollte.
Ich habe die .today zu display: none , #data-container zu overflow-y: auto und overflow-x: hidden gemacht und dann die Animation geändert.
Die Animation bewegt nun das aktuelle div nach irgendwo und animiert es dann von dieser Position zurück.
Neue Animation
%Vor%Tags und Links javascript html jquery css css3