MGR111

środkowanie 4 div wewnątrz głównego diva

Rekomendowane odpowiedzi

Witam,
Mam mały problem z wycentrowaniem 4 divów w jednym dużym divie. Wygląda to mniej więcej tak:
Główny DIV posiada własności ( width: 100%, max-width: 1080px ) , posiada on w środku 4 divy które mają szerokość 230px, i każdy z nich zawiera obrazek.

Chciałbym umieścić tak te 4 divy w środku, aby strona była responsywna, tzn: wraz z zmiejszaniem okna przeglądarki może zmniejszać się odległość między divami (Ewentalnie troche rozmiar divów ( z 230px do min 150px),),
i jeśli np. 4ty div się nie mieści mógłby wskoczyć na dół ale znów wyśrodkowany, później ze zmniejszaniem okna przeglądarki jeśli 2 divy sie nie mieszczą to 2 wskakują na dół i się środkują.

Przedstawiam przykładowe zdjęcie jak mogłby to wyglądać.

Jeśli chodzi o moje próby, próbowałem każdemy przypisać position: absolute, oraz odpowiednio parametry left. Jednak efekt jest taki że elementy nachodzą na siebie i nie wskakują na dół (i oczywiście się nie centrują)

Prosze o każdą pomoc,  góry serdecznie dziekuje! :)
 

schemat.png

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

 

Wystarczy display:inline-block;

<style>
body,html{width:100%;height:100%}
.container{width:100%;height:100%;text-align: center;}
.container div{width:230px;height:230px;display:inline-block;background:#ddd;}
</style>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

 


Profesjonalne narzędzia do wtryskiwaczy oraz kosmetyki do włosów i paznokci Hurtownia kosmetyczna

http://www.polskie-navi.pl

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się


  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.