Kind div ausrichten Zentrum auf Eltern div mit Überlauf?

Question

Hallo Stackoverflow Team,

Wie kann das Kind div innerhalb der Eltern div mit Überlauf einen rechten und linken Rand haben? Ich versuche das Problem zu lösen, aber es gibt keine saubere Lösung dafür.

Versuch:

margin-right nicht funktionieren

div { 
 
    border: 1px solid black; 
 
} 
 

 
.parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    width: 350px; 
 
    height: 150px; 
 
    top: 50px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    position: absolute; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Meine unreinen Lösung:

div { 
 
    border: 1px solid black; 
 
} 
 

 
.parent { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    width: 350px; 
 
    height: 150px; 
 
    top: 50px; 
 
    margin-left: 20px; 
 
    border-right: 20px solid red; 
 
    position: absolute; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Gibt es einen besseren Weg, um das Problem zu lösen?

Answer 1

Da Sie position: absolute für das Kind verwenden, ist der beste Weg zu erreichen, was Sie wollen, entfernen Sie position: absolute dann fügen Sie die Ränder, die Sie benötigen.

div{ 
 
    border: 1px solid black; 
 
} 
 
.parent { 
 
    width:300px; 
 
    height:300px; 
 
    margin:auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
.child { 
 
    width:350px; 
 
    height:150px; 
 
    top: 50px; 
 
    margin: 50px 20px 0; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

aktualisieren

Wenn Sie das Kind div position: absolute sein, Sie es in einem anderen div wie folgt wickeln müssen:

div{ 
 
    border: 1px solid black; 
 
} 
 
.parent { 
 
    width:300px; 
 
    height:300px; 
 
    margin:auto; 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 
.child { 
 
    border-color: red; 
 
    position: absolute; 
 
    top: 20px; 
 
    height: 150px; 
 
} 
 
.sub-child { 
 
    width:350px; 
 
    height:150px; 
 
    margin: 0 20px; 
 
    display: inline-block; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="sub-child"></div> 
 
    </div> 
 
</div>