Divs oben nach unten ausrichten

Question

Ich habe ein article-Tag, der innerhalb eines PHP-Codes steht, der Artikel von WordPress generiert. Sie sind natürlich nicht alle die gleiche Höhe, es hängt vom Inhalt ab. Sie sind in zwei Spalten durch float organisiert.

Wenn ein Artikel in der ersten Zeile nicht die gleiche Höhe wie der andere in derselben Zeile hat, wird die zweite Zeile am unteren Rand des größeren div ausgerichtet. Jetzt möchte ich sie ohne Zwischenraum ausrichten.

Hier ist etwas CSS:

#container {
width: 1000px;
margin: 0px auto;
}

article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}

Bearbeiten Sie jsFiddle (jetzt mit Inhalt, um das Problem zu demonstrieren): http://jsfiddle.net/4PMj5/6/

Answer 1

Sie können die even und odd Kinder-Pseudoauswahl in Ihrem CSS verwenden.

article:nth-child(even) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: right;
}
article:nth-child(odd) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: left;
}

Das Ergebnis wird sein wie: dieses aktualisierte Fiddle.