![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 1 707 Pomógł: 266 Dołączył: 3.07.2012 Skąd: Poznań Ostrzeżenie: (0%) ![]() ![]() |
Witajcie,
jaki jest najlepszy sposób na rozmieszczenie kafelków tak jak na poniższym obrazku (na dole): (IMG:http://i62.tinypic.com/k0fq5h.png) 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? |
|
|
![]() |
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 1 707 Pomógł: 266 Dołączył: 3.07.2012 Skąd: Poznań Ostrzeżenie: (0%) ![]() ![]() |
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ć (IMG:style_emoticons/default/smile.gif) Czy ktoś ma jakiś pomysł? |
|
|
![]() ![]() |
![]() |
Aktualny czas: 4.10.2025 - 14:41 |