Boxen margin-right
Brathhahn
- css
Hallo,
ich habe mal eine Frage. Und zwar baue ich mir gerade eine Art Galerie mit gefloateten Div-Containern. Um jeweils einen Abstand zur nächsten (rechts folgenden) Box zu haben, ist in der Klasse "box" noch ein margin-right mit 25px angegeben. Die letzte (hier dritte) Box in einer Reihe hat margin-right:0, damit das Layout nicht gesprengt wird.
Konkreter Code:
<div class="box">
</div>
<div class="box">
</div>
<div class="box" style="margin-right:0px;">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box" style="margin-right:0px;">
</div>
Alles in allem ist das wohl eher suboptimal. Ich muss den margin-right immer so austarieren, dass es von der Seitenbreite her genau passt. Besser wäre eine Lösung, mit der ich die drei Boxen schön gleichmäßig auf einer gegebenen Breite aufteilen könnte.
<div id="übergeordnetesElement">
<!-- die drei folenden Container sind der erste linksbündig, der zweite mittig und der dritte rechtsbündig vom übergeordneten Element gesehen -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<!-- die drei folenden Container sind der erste linksbündig, der zweite mittig und der dritte rechtsbündig vom übergeordneten Element gesehen -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<!-- die drei folenden Container sind der erste linksbündig, der zweite mittig und der dritte rechtsbündig vom übergeordneten Element gesehen -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
wie macht man denn sowas mit CSS? Geht das überhaupt?
Viele Grüße
DAS HUHN
Nur als Anregung:
Alles in allem ist das wohl eher suboptimal. Ich muss den margin-right immer so austarieren, dass es von der Seitenbreite her genau passt. Besser wäre eine Lösung, mit der ich die drei Boxen schön gleichmäßig auf einer gegebenen Breite aufteilen könnte.
Monitore sind nicht alle gleich breit, Browserfenster sind nicht alle gleich breit.
Sofern der umgebende Bereich der Seite es erlaubt, ist es dementsprechend am sinnvollsten, so viele Elemente in einer Zeile zu platzieren, wie in die Zeile passen, und nicht fix n Bilder, die in der Folge mal auf 500 Pixeln Breite zusammengequetscht werden, sich mal in gähnender Leere auf 1500 Pixeln verlieren.
wie macht man denn sowas mit CSS? Geht das überhaupt?
So:
<img>
<img>
<img>
<img>
<img>
<img>
<img>
Den Umbruch erledigt der Browser von alleine. Einfacher geht's nicht.
Hi,
Monitore sind nicht alle gleich breit, Browserfenster sind nicht alle gleich breit.
Ich sagte ja, in Abhängigkeit vom übergeordneten Element. Wenn dieses 500 Pixel breit ist, ist es 500 Pixel breit. Dann passen da genau meine n Boxen rein.
So:
<img>
<img>
<img>
<img>
<img>
<img>
<img>
Ne, das ist Quatsch. Ich sprach a) von divs (zu einer Galerie gehören unter Umständen Überschriften/Unterschriften pro Bild => also komplexere Gebilde womöglich) und b) möchte ich die Boxen LINKSBÜNDIG, MITTIG und RECHTSBÜNDIG in Abhängigkeit vom übergeordneten Element haben. Wenn das also der body sein sollte, dann sollte eine Box ganz links am Browserrand kleben, eine in der Mitte und eine ganz rechts am Browserrand.
Brathahn
Om nah hoo pez nyeetz, Brathhahn!
versuchs doch mal mit einer Tabelle.
ne - nicht wirklich, aber display: table bzw. display: table-cell können das leisten was du suchst.
Vielleicht passen aber je nach Bildschirm 2 oder 5 Boxen nebeneinander ...
Matthias