CSS relative Positionierung zu übergeordneten und anderen Kindern

Question

Ich habe ein Problem mit der Positionierung meiner <div> Elemente. Ich habe folgendes Beispiel: https://jsfiddle.net/5tv4pyh0/1/

Wie Sie sehen können, ist das zweite Kind unter dem ersten positioniert. Was ich erreichen möchte, ist, dass das zweite Kind an der gleichen Stelle steht wie die erste, solange sie sich nicht überlaufen. Wenn das zweite Kind left: 30% hätte, sollte es unter dem ersten Kind angezeigt werden.

Mit position: absolute für die Kinder funktioniert auch nicht, weil beide Kinder eine flexible Höhe haben können. Ich habe auch versucht, hinzuzufügen, aber dann erscheinen beide Kinder immer nebeneinander, unabhängig davon, was ich auf left eingestellt habe.

Irgendwelche Vorschläge, wie ich das gewünschte Verhalten erreichen kann?

Edit:

Ich versuche, ein Raster zu erstellen, wie mit nur Positionierung der x-Position auf die untergeordneten Elemente zu setzen. Wenn dann die zwei Kinder die gleiche x-Position haben oder das zweite Kind eine x-Position hat, die innerhalb der Breite des ersten Kindes liegt, sollte die zweite unter dem ersten Element erscheinen. Wenn das zweite Kind eine x-Position neben dem ersten Kind hat, sollte es an der gleichen y-Position positioniert sein.

Danke, Gerry

Answer 1

Änderungen an Ihrem CSS Folgende: müssen Sie Anzeige hinzu: inline-block für Kindklasse und Position entfernen: relatives Attribut für gleiche

I 80% Breite hinzugefügt für das erste Kind des Kindes nur zu Testzwecken.

.container { 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.child { 
 
    /*position: relative;*/ 
 
    border: 1px solid blue; 
 
    width: 25%; 
 
    margin-bottom: 10px; 
 
    display: inline-block; 
 
} 
 
.child:first-child { 
 
    width: 80%; 
 
}

<div class="container"> 
 
    <div class="child" style="height: 50px; left: 10%;">child 1</div> 
 
    <div class="child" style="height: 30px; left: 40%;">child 2</div> 
 
</div>