Es können keine Elemente zu relativen divs hinzugefügt werden, die sich in einer Zeile befinden.

Question

Ich versuche, zwei relative Positionierungsdivs in einer Zeile zu finden, und Code funktioniert gut, aber es wird zu einem großen Durcheinander, wenn ich versuche füge einige Elemente zu einem von ihnen hinzu. Warum passiert das? Wie man es repariert?

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.parent { 
 
    white-space: nowrap; 
 
    font-family: Arial; 
 
    color: #222; 
 
    letter-spacing: 1px; 
 
} 
 

 
.kiddo { 
 
    position: relative; 
 
    width: 50%; 
 
    height: 20vh; 
 
    display: inline-block; 
 
} 
 

 
.first { 
 
    background: pink; 
 
} 
 

 
.second { 
 
    background: skyblue; 
 
}

<div class="parent"> 
 
    <div class="kiddo first"> 
 
    <!-- divs are in one line only when they doesn't contain any elements --> 
 
    <p> 
 
     Lorem ipsum dolor sit amet 
 
    </p> 
 
    </div><!-- 
 
    --><div class="kiddo second"></div> 
 
</div>

Answer 1

gelten float:left-.kiddo ein dann fein