Stapeln divs mit variabler Höhe in 2 Spalten wie Facebook Timeline
Weiß jemand wie ich das machen kann? Ich möchte einen natürlichen Fluss von Inhalten schaffen. Das Problem, dem ich jetzt gegenüberstehe, ist, dass die divs sich nur nebeneinander aufstellen. Sie werden nicht die untere Kante des schwebenden Blocks auf der gegenüberliegenden Seite passieren.
Die folgende Abbildung zeigt das Problem deutlich. Nehmen wir an, ich habe 4 Divs mit variablen Höhen.
- Div1, beginnt immer links
- Div2, wird immer auf der rechten Seite angezeigt
- Div3, ist auf der linken oder rechten Seite, abhängig von der Höhe von Div1 und Div2
- Div4, in dieser Situation bleibt Div4 nicht am unteren Ende von Div2
- Div5, das gleiche Problem tritt auf
Also, die Position der divs & gt; Div2 sollte durch die Höhe der vorherigen Divs bestimmt werden.
2 Antworten
Ich habe letzte Nacht daran gearbeitet und einen ziemlich einfachen Weg gefunden.
Vergleichen Sie die untere Position der linken Spalte und die rechte Spalte, hängen Sie das neue li-Element an die Seite mit kleinerem Wert an, was auf folgende Weise geschehen kann:
%Vor%.left und .right verwenden dieselbe CSS wie Sie.
Nachdem ich das Facebook CSS und HTML geprüft habe, habe ich festgestellt, dass sie dies mit list erreichen und die float für die li Elemente zwischen left und right alternieren (dh jedes even Element ist richtig floatiert) )
Zum Beispiel:
HTML
%Vor%CSS
%Vor%Arbeitsbeispiel: Ссылка
Dieser Ansatz funktioniert nur, wenn ein Element auf der einen Seite die Höhe von zwei Elementen auf der anderen Seite nicht überschreitet. Wenn zum Beispiel in Ihrem Diagramm Box 2 eine größere Höhe als Box 1 und 3 haben soll, wird Box 5 verschoben und in Box 4 positioniert.
Wie folgt: Ссылка
Ich habe kein Beispiel für dieses Problem auf Facebook gefunden (ein Element überschreitet nie die Höhe von zwei), also glaube ich, dass sie das berücksichtigt haben. Sie können dies möglicherweise mithilfe von JavaScript erreichen - wenn Sie die Elemente überprüfen, haben sie eine Eigenschaft data-height , die der Höhe des Elements entspricht.