Witajcie,

jaki jest najlepszy sposób na rozmieszczenie kafelków tak jak na poniższym obrazku (na dole):



Chodzi o to, że mamy kilka bloków, które są od siebie oddzielone określonym marginesem. Można nadać każdemu blokowi display: inline-block i margin, jednak wtedy kafelki będą odsunięte również od zewnątrz. Chciałbym, żeby zajmowały całą szerokość kontenera. W idealnym przypadku margines byłby dobierany automatycznie na podstawie liczby elementów, które chcę tam wcisnąć, ale to pewnie niemożliwe.

Zawsze robiłem tak, że nadawałem elementom margines dolny i prawy, a kontener miał overflow: hidden. Czy jest jednak lepszy sposób?

Luknij w źródło...

Dałbym każdemu float:left i margines

Firebug Twoim przyjacielem

To może inaczej. Załóżmy, że mam kontener o szerokości 460 pikseli. Chcę do niego wstawić 8 bloków o wymiarach 100x100, a między blokami chciałbym 20 pikseli przerwy. Standardowo mógłbym dać każdemu blokowi margines dolny i prawy po 20 pikseli i wtedy zmieszczą mi się po 3 bloki w poziomie. Jednak nie o to chodzi, bo chcę, by prawy margines ostatniego bloku w rzędzie nie przeszkadzał. Powinny wejść 4 bloki w poziomie: 100 + 20 + 100 + 20 + 100 + 20 + 100 = 460, czyli idealnie nasz kontener.

Mógłbym też użyć lewego marginesu zamiast prawego i z elementu :first-child ustawić margines na 0. Wtedy jednak będzie dobrze tylko dla pierwszego wiersza.

Inną opcją jest wstawianie każdego wiersza jako elementu, ale chciałbym tego uniknąć.

Jeszcze inną opcją jest nth-child, ale wiadomo jak jest ze wsparciem tego.

Mam przeczucie, że można to rozwiązać z ujemnymi marginesami, ale oczywiście mogę się mylić Czy ktoś ma jakiś pomysł?

jak tak bardzo cenisz sobie ie8 i niżej to może warto zacząć od projektowania na siatce układu elementów Twojej strony np.