MGR111

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

5 postów w tym temacie

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 ten post


Link to postu
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>

 

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

A ja polecam skorzystać z frameworków css'a --> Bootstrap

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Chcesz dodać odpowiedź ? Zaloguj się lub zarejestruj nowe konto.

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

Utwórz konto

Zarejestruj nowe konto, to bardzo łatwy proces!


Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!


Zaloguj się

  • Kto przegląda   0 użytkowników

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