Verschieden große div Boxen dynamisch anordnen

_voodoo

_voodoo

Erfahrenes Mitglied
Hallo liebes Forum,
ich habe hier ein Problem mit css Boxen, das ich so grad nicht gelöst bekomme :(
HTML: 
<style>
div.box
{
width:250px;
float:left;
border: solid 1px #000;
font-size:150px;
text-align:center;
}
div.container
{
width:600px;
}
</style>
<!-- (...) //-->
<div class="container">
<div class="box" style="height: 250px">1</div>
<div class="box" style="height: 350px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box" style="height: 250px">4</div>
</div>
Was ich möchte, ist dass Box 3 die Lücke nach oben zur 1 schließt und aufrückt.

Ist denn sowas ohne größeren Aufwand überhaupt möglich?

Ich danke euch für die Hilfe
 
Also, wenn eine Box 250px breit ist und dein umschließender Container nur 600px hat, wird es nichts.

Nimm die width-Angabe für .container raus. Oder du passt die Breite neu an. Wenn ich dich richtig verstanden habe, sollen jeweils 3 Boxen nebeneinander stehen.
So ergibt sich für .container folgende Breite.

3 x 250px + 2 x 3px Border link/rechts = 750px + 6px = 756px.Möchtest du später noch Außen- und Innenabstände, mußt du diese auch berücksichtigen.
 
Ich habe den Container bewusst 600px breit gemacht, damit 2 Boxen nebeneinander angezeigt werden.
Mein Ziel ist es, die Boxen vertikal aneinander zu bringen, also den selben Abstand zueinander wie horizontal.
Code: 
+------------+  +------------+
|            |  |            |
|            |  |            |
+------------+  |            |
+------------+  |            |
|            |  +------------+
|            |  +------------+
|            |  |            |
|            |  |            |
|            |  +------------+
+------------+
 
So geht's.

Wenn du CSS3 nutzen möchtest, kannst du auch den auskommentierten Selektorblock nutzen. Dafür brauchst du dann keine neue Klasse.
Code: 
.box {
 width:250px;
 float:left;
 border: solid 1px #000;
 font-size:150px;
 text-align:center;
 background:#aaa;
 margin-top:10px ;
}

/*
.box:nth-child(2n){ 
 float:right; 
 background:#ade;
}
*/

.rechts {
 float:right;
 background:#ade;
}

.container {
 width:514px;
 float:left;
 background:#ddd;
 padding:10px 10px 0 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="height: 250px">1</div>
<div class="box rechts" style="height: 350px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box rechts" style="height: 250px">4</div>
</div>

Beispiel
 
Zuletzt bearbeitet:
CSS3 ist doch noch nicht fertig gestellt und einheitlich in allen Browsern implementiert?

Danke schonmal für deinen Code, das schaut sehr inspirierend aus!
Was passiert aber, wenn Zwei Boxen in der "linken Spalte" eine geringere Höhe haben, als eine Box rechts ... *klick*
 
Na dann mach es so
Code: 
.box {
 width:250px;
 border: solid 1px #000;
 font-size:50px;
 text-align:center;
 background:#aaa;
 margin-bottom:10px;
}

#links {
 float:left;
}

#rechts {
 float:right;
}

.container {
 width:514px;
 float:left;
 background:#ddd;
 padding:10px 10px 0 10px;
}

<div class="container">

<div id="links">
<div class="box" style="height: 150px">1</div>
<div class="box" style="height: 500px">2</div>
<div class="box" style="height: 150px">3</div>
<div class="box" style="height: 300px">4</div>
</div>

<div id="rechts">
<div class="box" style="height: 300px">5</div>
<div class="box" style="height: 100px">6</div>
<div class="box" style="height: 400px">7</div>
<div class="box" style="height: 300px">8</div>
</div>

</div>
hier
 
Zuletzt bearbeitet:
_voodoo hat gesagt.:
CSS3 ist doch noch nicht fertig gestellt und einheitlich in allen Browsern implementiert?
Zum Vergrößern anklicken....

Wenn es nach den Browserherstellern geht, wird CSS 3 niemals fertig sondern einfach immer weiter entwickelt. In allen aktuellen Browsern, ja auch IE!!, werden sehr viele Eigenschaften schon unterstütz. Dazu gehören auch die tollen neuen Selectoperatoren :).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück