Jak rozmieścić moje elementy div w sposób podobny do osi czasu na Facebooku?

Question

Podoba mi się układ, który zawiera Oś czasu na Facebooku z rozłożonymi dwiema kolumnami. Próbowałem stworzyć ten sam układ z tylko standardami div s i floats. Pływaki działają dobrze podczas unoszenia się na jedną stronę, ale nie na drugą. Biorąc pod uwagę, że są bloki o wielu wysokościach, jak sugerujesz, jak najlepiej radzić sobie z tym układem? Byłby używany na blogu i zdaję sobie sprawę, że ktoś stworzył na tym szablonie WordPress, ale czy możliwe jest rozpowszechnienie układu w najprostszej postaci? Po uruchomieniu okna dewelopera Chrome na mojej osi czasu i szablonie WordPress staram się znaleźć odpowiedni kod CSS i potrzebuję pomocy.

Powiem, co mam jako jsFiddle. Dodałem dodatkowe bloki, jeśli ich potrzebujesz, aby się upewnić.

Answer 1

Musisz mieć pojemniki po lewej stronie, które są pływające i wyczyszczone w lewo, a te z prawej strony powinny być wypuszczone i wyczyszczone. Możesz to zrobić za pomocą javascript lub innego języka po stronie serwera, z którego korzystasz. coś takiego w jquery byłoby takie.

(wypełniony skrzypce .. http://jsfiddle.net/gK2Vn/ jadę do gołych kości pytanie ..)

.item { 
    float: left; 
    clear: left; 
} 
.item.right { 
    float: right; 
    clear: right; 
} 

var left_column_height = 0; 
var right_column_height = 0; 
var items = $('.item'); 
for (var i = 0; i < items.length; i++) { 
    items.eq(i).height(Math.floor(Math.random() * 100) + 10); 
    if (left_column_height > right_column_height) { 
     right_column_height+= items.eq(i).addClass('right').outerHeight(true); 
    } else { 
     left_column_height+= items.eq(i).outerHeight(true); 

    } 
} 

Answer 2

Miałem to samo pytanie, a odpowiedź Marka nie działa dla mnie.

Jednak This method worked for me

You can see it in action in this Fidddle

Mam nadzieję, że to pomaga czy ktokolwiek inny! :)