Wie stapele ich Divs automatisch vertikal in einem übergeordneten Element?

Lesezeit: 2 Minuten

Benutzer-Avatar
Findeldor

Hier ist, was ich versuche zu erreichen …
n1csD

  1. “parent” hat position:relative
  2. “div 1-3” haben Position: absolut

Immer wenn ich dies tue, muss ich jedoch in meinem CSS bestimmte „Top“-Werte zuweisen. Div 1 könnte also top:50px sein, div 2 wäre top:150px und div 3 wäre top:225px;

Gibt es eine Möglichkeit, sicherzustellen, dass die Divs weiterhin innerhalb des übergeordneten Elements gestapelt werden, ohne Spitzenwerte und/oder absolute Positionierung zuzuweisen?

  • Kannst du deinen Code posten? Sie sollten dieses Verhalten standardmäßig haben.

    – Giovanni Silveira

    10. Oktober 2013 um 0:15 Uhr

Benutzer-Avatar
Joseph

EIN div sollte bereits als Block angezeigt werden und eine ganze “Reihe” einnehmen. Hier ist etwas HTML und CSS, um ein Beispiel zu geben, vergleichen Sie es mit Ihrem Code:

http://jsfiddle.net/mWcWV/

<div id="parent">

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

</div>

Benutzer-Avatar
Der DorfIdiot

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 dies Geige.

Benutzer-Avatar
Osahadi

Im css Datei verwenden …

div
{
    display : block;
}

Was für jeden eine Bruchlinie ergibt div blockieren und diese Funktion ist standardmäßig und wird nicht verwendet relativeabsolute Technik.

  • Aber die Frage ist: Wenn ich ein Inline-Menü habe und diese drei Felder im Inline-Stil mit (Eltern-Kind) (relativ-absolute) Technik angeordnet sind. Wie kann das möglich sein

    – Osahadi

    29. April 2017 um 15:09 Uhr


  • Dadurch wird jeder platziert div sofort nach seinem Vorgänger vertikal und nicht horizontal (dh in einer Spalte und nicht in einer Reihe). Es wird nicht Platzieren Sie einen beliebigen Abstand zwischen ihnen, was die Illustration der Frage als gewünschtes Verhalten suggeriert. Außerdem sollten Sie erklären warum Sie denken, sie sollten das nicht verwenden relative/ absolute Technik.

    – zu nett

    29. April 2017 um 15:49 Uhr

Div-Elemente sind Blockelemente, was bedeutet, dass sie eine ganze Reihe einnehmen und dass jedes Element daneben eine Zeile überspringt. Mach einfach:

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

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

Entfernen Sie einfach die absolute Positionierung. Zentrieren Sie die divs mit margin:auto und stellen Sie dann beliebige vertikale Ränder bereit.

Benutzer-Avatar
Gunjan Kothari

Sie können dem inneren Div Marge geben.

1216810cookie-checkWie stapele ich Divs automatisch vertikal in einem übergeordneten Element?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy