Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Centrowanie kilku divów w containerze
Forum PHP.pl > Forum > Przedszkole
arek33
Hej! Mam poniższy kod, napisany teraz na szybko dla zilustrowania problemu. Szukałem dużo informacji w sieci na ten temat, próbowałem rozgryźć css bootstrapa, ale nadal jestem w d.. Albo czegoś nie rozumiem, albo jestem ciemna masa. Może jedno i drugie.

  1. .container { width: 900px; margin: 0 auto; }
  2. .div { float: left; width: 30%; }


  1. <div class=".container">
  2. <div class=".div">
  3. lorem ipsum1
  4. </div>
  5. <div class=".div">
  6. lorem ipsum2
  7. </div>
  8. <div class=".div">
  9. lorem ipsum3
  10. </div>
  11. </div>


W klasie .container, która centruje mi warstwy i nadaje szerokość 900px umieszczam trzy identycznie divy, które mają szerokość po 30% każdy. W sumie zostaje mi 10% przestrzeni na marginesy. Pytanie teraz do wymiataczy: jak sprawnie ustawić automatyczne marginesy pomiędzy tymi trzema divami? "margin: 0 5%" dla drugiej warstwy mnie nie satysfakcjonuje, ponieważ chciałbym, aby działało to jako responsive. Jeżeli ustawię margin dla środkowego diva to po zmienia rozdzielczości ten margines pozostanie. Nie chciałbym też działać na media queries.

Za wszystkie odpowiedzi będę bardzo wdzięczny.

Pozdrowienia,
Arkadiusz
Crozin
Cytat
[...] próbowałem rozgryźć css bootstrapa, ale nadal jestem w d..
Jak rozumiem pracowałeś na wersji 3.x, tak? W takim razie wszystko czego potrzebujesz to:
  1. <div class="row my-container">
  2. <div class="col-md-4">left</div>
  3. <div class="col-md-4">center</div>
  4. <div class="col-md-4">right</div>
  5. </div>
  1. .my-container {
  2. width: 900px;
  3. margin: 0 auto;
  4. }
Turson
<div class=".div">
.div? Te kropki są niepotrzebne
arek33
Te kropki wstawiłem tutaj z pośpiechu, w moim 'projekcie' ich naturalnie nie ma smile.gif

@Crozin, wiem jak zastosować to z Bootstrapem. Chciałbym zrozumieć jak to działa w CSS pisanym od zera? Jak centrować warstwy w containerze?
Crozin
Skoro wiesz, że w Bootstrapie to zadziała poprawnie, to co za problem szybko zerknąć jakie style nadawane są dla .row i .col-md-4? smile.gif Wiele tam tego nie ma.
arek33
Przeanalizowałem CSS z Bootstrapa kilka razy i nadal nie wiem gdzie robię błąd..
Crozin
1. Nie pokazujesz jak próbujesz.
2. Czy w efekcie końcowym powinny zawsze wyświetlać się trzy kolumny czy na małych ekranach powinny one wskoczyć jedna pod drugą?
3. Przykładowe rozwiązanie: http://cssdesk.com/mXh3r
4. Jeżeli chcesz inne zachowanie dla małych i dużych ekranów nie obejdziesz się bez media queries. Nie wiem też czemu nie chcesz z nich korzystać. Mają całkiem dobre wsparcie, a dla starych wersji IE masz http://stackoverflow.com/a/5770956/252591
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.