zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Divs in flexiblem Div zentrieren

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.03.2014, 19:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.03.2014
Beiträge: 2
excessived befindet sich auf einem aufstrebenden Ast
Ausrufezeichen CSS Divs in flexiblem Div zentrieren

Hallo zusammen,

ich habe folgendes Problem:
Ich habe eine Div-Box, welche in ihrer Breite flexibel, sowie mittig ausgerichtet ist:

Code:
.divmiddle {
  margin: 0 auto;
  width: 70%;
  height: 70%;
in diesem Div sollen nun Divs in der Größe 300x300 Px eingebunden werden, welche zentriert nebeneinander stehen sollen. Wird das Browserfenster zugezogen, sollen die Divs automatisch umbrechen:

Code:
.div1 {
  margin: 0 auto;
  float: left;
  padding: 10px;
  width: 300px;
  height: 300px;
}

.div2 {
  margin: 0 auto;
  float: left;
  padding: 10px;
  width: 300px;
  height: 300px;
}

.div3 {
  margin: 0 auto;
  float: left;
  padding: 10px;
  width: 300px;
  height: 300px;
}
Derzeit stehen die Divs in dem Eltern-Div und brechen auch um. Allerdings sind sie linksbündig - ich hätte die Gruppe aus den Divs gerne zentriert
Also wenn das Fenster zugezogen wird, springt z.B Bild 3 in die zweite Zeile unter Bild 1. Dann ist rechts ein großer freier Raum ( dort wo Bild 3 nicht mehr ganz hin passt).
Hier hätte ich es nun gerne so, das die Divs so hinrutschen, das sie in der Mitte des Wrappers stehen
Wenn das Fenster z.B soweit zugezogen wird, das alle Bilder untereinander stehen ist rechts sehr viel Platz - die frei Bilder untereinander sollen dann zentriert im Wrapper stehen

- ist das überhaupt möglich ?

Hier mal mein Beispiel: http://jsfiddle.net/ryU8b/1/

Danke für eure Hilfe !

Geändert von excessived (11.03.2014 um 20:06 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.03.2014, 00:50
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Beispiel:

HTML-Code:
<!DOCTYPE HTML>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Justify - Blocksatz</title>
    <style type="text/css">
    main {
        text-align: justify;
        width: 90%;
        height: 70%;
        margin: 0 auto;
    }
    main:after {
        content: "";
        display: inline-block;
        padding-left: 100%;
        visibility: hidden;
    }
    section.square {
        padding: 10px;
        width: 300px;
        height: 300px;
        border: 1px solid red;
        display: inline-block;
    }
    </style>
</head>

<body>
    <main>
        <section class="square">
            <p>section 1</p>
        </section>
        <section class="square">
            <p>section 2</p>
        </section>
        <section class="square">
            <p>section 3</p>
        </section>
        <section class="square">
            <p>section 4</p>
        </section>
        <section class="square">
            <p>section 5</p>
        </section>
        <section class="square">
            <p>section 6</p>
        </section>
    </section>
</body>

</html>
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.03.2014, 01:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.03.2014
Beiträge: 2
excessived befindet sich auf einem aufstrebenden Ast
Lächeln

habe etwas gefunden was das darstellt was ich vor hatte
habe es jetzt so gelöst: Beispiel 8

(siehe Seitenquelltext)
Mit Zitat antworten
Antwort

Stichwörter
css, div, elternelement, flexibel, zentrieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Css Div Boxen relativ untereinander ausrichten heinbloed CSS 1 24.01.2011 00:06
div mit css über andere elemente platzieren ping CSS 6 20.08.2009 14:54
ul in div zentrieren MrMister CSS 8 05.07.2009 23:52
nur bestimmte divs mit css formatieren tricky CSS 2 05.03.2004 11:19


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:29 Uhr.