webentwicklung-frage-antwort-db.com.de

Wie kann ich Divs innerhalb eines übergeordneten Elements automatisch vertikal stapeln?

Folgendes versuche ich zu erreichen ...

  1. "parent" hat eine Position: relativ
  2. "div 1-3" haben die Position: absolut

Wenn ich das mache, muss ich jedoch in meinem CSS bestimmte "Top" -Werte zuweisen. Div 1 könnte also top sein: 50px, div 2 wäre top: 150px und div 3 wäre top: 225px;

Gibt es eine Möglichkeit, um sicherzustellen, dass die divs weiterhin im übergeordneten Element gestapelt werden, ohne Top-Werte und/oder absolute Positionierung zuzuweisen?

csshtmlpositionparent
23
Fingeldor

Ein div sollte bereits als Block angezeigt werden und eine vollständige "Zeile" einnehmen. Hier sind einige HTML- und CSS-Beispiele, die Sie mit Ihrem Code vergleichen können:

http://jsfiddle.net/mWcWV/

<div id="parent">

    <div class="child">Foo</div>
    <div class="child">Bar</div>
    <div class="child">Baz</div>

</div>
23
Joseph

Sollte gerade sein:

HTML:

<div class="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

CSS:

.container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #ffbf00;
}
.red {
    background-color: #f00;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.blue { 
    background-color: #0f0;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}
.green {
    background-color: #00f;
    width: 200px;
    height: 150px;
    margin: 5px auto;
}

Überprüfen Sie diese Geige .

3
TheVillageIdiot

In css -Dateien verwenden ...

div
{
    display : block;
}

Wobei für jeden div -Block eine Trennlinie angegeben wird. Diese Funktion ist standardmäßig aktiviert und verwendet keine relative - absolute -Technik.

2
Osahady

Div-Elemente sind Blockelemente, was bedeutet, dass sie eine vollständige Zeile einnehmen und dass jedes Element neben ihnen eine Zeile überspringt. Mach einfach:

<div></div>
<div></div>
<div></div>

Wenn das nicht funktioniert, müssen Sie sie wahrscheinlich in display setzen: inline-block;

2
user1834464

Entfernen Sie einfach die absolute Positionierung. Zentrieren Sie die Divs mit margin:auto und geben Sie dann die gewünschten vertikalen Ränder an.

0
Mike Brant

Sie können dem inneren Div einen Spielraum geben.

0
Gunjan Kothari