Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Rozłożenie kafelków
SmokAnalog
post
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?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
SmokAnalog
post
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ł?
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 4.10.2025 - 14:41