"Lepsze" pływające w CSS

Question

Eksperymentuję z CSS i właściwością float. Mam ten „Witryna”, z wieloma div wyrównany do 80px siatki i float: left:

Czy istnieje sposób w CSS, aby to wygląda tak - tak elementy można wykorzystać pustą przestrzeń nad nimi ?

Bez JavaScriptu, jeśli jest to możliwe.

Dzięki, Martin.

Answer 1

dla Dachówka dynamicznej zawartości zarówno poziomo jak i pionowo, opcje CSS są:

• float:left, jak już widzieliśmy, tylko oferuje ograniczoną Układanie poziomego.
• display:inline-block daje inny wynik niż float:left, ale bez kafelków.
• CSS multi-column layout nie jest jeszcze w pełni zdefiniowany. Obsługuje pionowy przepływ do ukrytych kolumn, ale prawdopodobnie nie w sposób, który kwalifikuje się jako kafelkowanie.
• flexible box layout nie jest jeszcze obsługiwany. Obsługuje rodzaj przepływu poziomego lub pionowego, który może nie kwalifikować się jako kafelkowanie, chociaż wydaje się, że jest krokiem we właściwym kierunku.

Podsumowując, nawet standardy CSS, które nie zostały jeszcze w pełni zdefiniowane, wydają się tego nie wspierać; więc może być daleko w tyle. Najprostszą opcją zastępczą jest użycie wtyczki jQuery.

Oprócz Masonry (jak zasugerował @Billy Moat), kolejne kilka wtyczek jQuery to Isotope i Tiles Gallery. Najczęściej wymieniany jest murarski.

Answer 2

Nie, nie można tego zrobić w CSS. Najlepszym sposobem jest użycie elementu javascript zwanego masonry, obawiam się.

http://masonry.desandro.com/

Answer 3

powiedzmy, że liczba px iść w górę, aby wypełnić przestrzeń 1 blok jest 50px. margin-top: -50px;

To nie jest magia, to tylko odrobina ręcznej roboty dla każdego z nich. Jeśli twoja zawartość jest dynamiczna, to nie może działać, lub potrzebujesz js do obliczenia, czy musimy iść w górę, czy nie, w wielu wierszach i wszystkim.

Answer 4

można to zrobić, ale jak mówi CHE, jeśli zawartość jest dynamiczna, wszystko pójdzie źle w najgorszy możliwy sposób.

Ale jeśli jest to strona statyczna, można to zrobić na pewno.

Aby rozwiązać ten problem, zastanów się w blokach & i wyrównaj je, wewnątrz każdego bloku ponownie wyrównaj wszystkie bloki.