vertikale Abstand zwischen display: inline divs in einem Fluid Grid

Question

Ok, nicht ganz sicher, wo ich anfangen soll ...

ich mich zusammen ein Blogger setzen, vollständig Ausnehmen es CSS ist und dessen Verwendung nur als einfacher Inhalt Manager. Hier ist die Testseite, die ich mit http://jamesparishtestblog.blogspot.com/

Ignorieren die Header, gebrochen, aber ich weiß, was ich dort mache. Mein Problem ist mit den Filmkritiken (gestohlen von Apple-Trailern als Temp-Inhalt). Wenn Sie die Größe der Seite ändern, fließen sie fließend in Zeilen unterschiedlicher Länge. Groß! Das Problem ist, dass sich die zweite Zeile (und somit die dritte, vierte usw.) vertikal an den unteren Rand des längsten (niedrigsten) div in der obigen Zeile ausrichtet. Ich möchte jedoch, dass jedes Div genau unterhalb des oberen 15px auseinander passt und ordentlich fließt, wenn ein anderes div erweitert wird (durch Klicken auf read more ...).

Das Platzieren der divs in einer Spalte ist ausgeschlossen, da die oberste Zeile die neuesten Einträge nebeneinander enthalten soll (mit einer Spalte würden sie untereinander auf der linken Seite stehen).

Set-Höhen für die divs ist auch ausgeschlossen, weil die Artikel erweitern müssen, und für das gesamte gewünschte Design absichtlich nicht übereinstimmen.

Das hat mich stundenlang beunruhigt. Ich hoffe ich habe mich klar erklärt und dass jemand helfen kann.

Danke für Ihre Zeit.

Answer 1

Sie wollen das also?

-------------------------- 
| __________ _______ | 
| |  | |  | | 
| |  | |  | | 
| |  | |  | | 
| ---------- |  | | 
| __________ |  | | 
| |  | |_____| | 
| |  | _______ | 
| |  | |  | | 
| ---------- |  | | 
|    ------- | 
|________________________| 

Ohne Spalten verwenden Sie können es auf CSS nicht alleine verlassen. Sie müssten etwas Javascript oder Server-Side-Zeug verwenden, um Dinge an den richtigen Ort zu bringen. Im Wesentlichen willst du eine Collage, schade, es gibt kein "Display: Collage"!

Natürlich könnte ich dich komplett missverstehen.

bearbeiten: "irgendwelche Vorschläge auf der Javascript Front"

Ich benutze Mootools für fast alle meine Websites. Ich definiere zuerst ein bisschen:

dispose: entnimmt ein Element aus dem dom und speichert es in einer Variablen.

inject: plumpst ein Element in das dom.

Ich würde diese in Spalten laden, dann alle in der "recent" -Spalte entsorgen und sie zurück in den Rest der Spalten injizieren, eine für jede Spalte. Mit anderen Worten, das ganze Layout wird mit CSS gemacht, das einzige laufende Javascript ist, dass Sie Ihre "letzten" Sachen als oberste "Zeile" setzen.