[HTML][CSS]Centrowanie kilku divów w containerze Opcje

[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.

[CSS] pobierz, plaintext 
.container { width: 900px; margin: 0 auto; }
.div { float: left; width: 30%; }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div class=".container">
<div class=".div">
lorem ipsum1
</div>
<div class=".div">
lorem ipsum2
</div>
<div class=".div">
lorem ipsum3
</div>
</div>
[HTML] pobierz, plaintext 

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]

[...] 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:

[HTML] pobierz, plaintext 
<div class="row my-container">
    <div class="col-md-4">left</div>
    <div class="col-md-4">center</div>
    <div class="col-md-4">right</div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.my-container {
    width: 900px;
    margin: 0 auto;
}
[CSS] pobierz, plaintext 

[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 (IMG:style_emoticons/default/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? (IMG:style_emoticons/default/smile.gif) Wiele tam tego nie ma.

Ten post edytował Crozin 27.01.2014, 17:05:07

[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