Jak mogę unosić się elementy o różnej wielkości w płytkę

Pytanie jest proste. Mam kilka elementów, które zamierzają zrobić kafelek. Jednak niektóre z nich mają dłuższą wysokość; powiedzmy dwa razy więcej niż pozostałe. Chcę, aby wszystkie z nich pasowały do kafelka tylko przez czysty styl CSS.Jak mogę unosić się elementy o różnej wielkości w płytkę

Oto co mam:

enter image description here

I to jest to, co chcę:

enter image description here

Oto mój kod:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
div { 
    box-shadow: 0 0 1px black inset; 
    width: 100px; 
    display: inline-block; 
} 
#d1, 
#d2, 
#d4, 
#d5, 
#d6, 
#d8, 
#d9{ 
    height: 100px; 
    background-color: yellow; 
} 
#d7, 
#d3{ 
    height: 200px; 
    background-color: red; 
} 
</style> 
</head> 
<body> 
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div> 
</body> 
</html>

i można spróbuj na żywo na JSBin: http://jsbin.com/usovek/1/edit

Uwagi:

Zawartość jest dynamiczna
liczba pól może się różnić
Każda skrzynka może być dłuższy. I być może szerszy.
Szerokość lub wysokość pudełka są zawsze pewną liczbę jednostek. Jednostka w tym przykładzie to 50, a niektóre pola to 50, inne mają wysokość 100 pikseli. Ale byłoby idealnie, gdyby problem został rozwiązany dla dowolnej liczby jednostek (1,2,3 ... 50px, 100px, 150px, ...)

Źródło

2013-03-10 AlexStack

Jeśli Twoja zawartość jest statyczna, możesz używać pozycja absolutna bloki wewnątrz stosunkowo umieszczonego pojemnika, ale jeśli zawartość jest dynamiczna niż nie można tego zrobić z CSS (tylko), co jest potrzebne do wykorzystania jest

jQuery Masonry

Albo najlepiej można zrobić jest this

CSS

#d7, 
#d3{ 
    height: 200px; 
    background-color: red; 
    float: left; 
}

3-ty Opcja: owijać pudełka insde pojemników i float odpowiednio

Demo (możliwe tylko, gdy rzeczy są statyczne) :)

Źródło

2013-03-10 08:01:43

dzięki za link do JQuery masonerii. To absolutnie fantastyczne. Wolę jednak robić to z czystym CSS, jeśli to możliwe. Podoba mi się również twoje rozwiązanie CSS, nawet jeśli zmienia kolejność elementów. Jeśli nikt inny nie ma lepszego rozwiązania, które jest czystym CSS i przy odpowiedniej kolejności, przyjmuję tę odpowiedź. – AlexStack

@AlexStack Zrobię dla ciebie czysty przykład CSS, ale nie będę taki, jak ty, ve ułożyłeś swoje elementy :) –

"Trzecia możliwość: Zawiń pojemniki insde i odpowiednio ułóż je". Nie zrozumiałem. Czy możesz podać przykładowy kod? – AlexStack

Jak mogę unosić się elementy o różnej wielkości w płytkę

Odpowiedz

Powiązane problemy