Kind-Element in Inline-Block div ändert die Eltern Geschwister Position

Question

Ich habe ein paar divs mit etwas Inhalt (ein anderes Div innerhalb). Ich möchte, dass die Eltern-Divs in einer schönen Linie positioniert werden und ich möchte, dass das Child-Div relativ zu seinem Elternteil ist.

Ich habe eine JSFiddle Zur Veranschaulichung gemacht. Im Moment sind die Divs alle gut platziert, aber wenn du das ".btn" Div in der letzten entfernst, wird alles durcheinander gebracht.

Um zu sehen, was ich meine, die HTML im JSFiddle ändern:

<div id="expand1" class="expand"> 
    <div id="btn1" class="btn">>></div> 
</div> 
<div id="expand2" class="expand"> 
    <div id="btn2" class="btn">>></div> 
</div> 
<div id="expand3" class="expand"></div> 

hier Was ist los? Wie kann ich das gewünschte Ergebnis erzielen?

Answer 1

Sie sollten Schwimmer für ein besseres Layout verwenden:

.expand{ 
 
    border:1px solid black; 
 
    width:400px; 
 
    height:400px; 
 
    display:inline-block; 
 
    float: left; 
 
} 
 

 
.btn{ 
 
    cursor:pointer; 
 
    position:relative; 
 
    top:150px; 
 
    left: 150px; 
 
    border: 1px solid black; 
 
    width:40px; 
 
    height:40px; 
 
    vertical-align:middle; 
 
    text-align:center; 
 
    line-height:40px; 
 
}

<div id="expand1" class="expand"> 
 
    <div id="btn1" class="btn">>></div> 
 
</div> 
 
<div id="expand2" class="expand"> 
 
    <div id="btn2" class="btn">>></div> 
 
</div> 
 
<div id="expand3" class="expand"></div>

Answer 2

.expand { 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 400px; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
.btn{ 
 
    margin: -20px 0 0 -20px; 
 
    cursor: pointer; 
 
    position: relative; 
 
    top: 50%; 
 
    left: 50%; 
 
    border: 1px solid black; 
 
    width: 40px; 
 
    height: 40px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    line-height: 40px; 
 
}

<div id="expand1" class="expand"> 
 
    <div id="btn1" class="btn">>></div> 
 
</div> 
 
<div id="expand2" class="expand"> 
 
    <div id="btn2" class="btn">>></div> 
 
</div> 
 
<div id="expand3" class="expand"></div>

Answer 3

Sie können einfach mit der Eigenschaft position spielen um das gewünschte Ergebnis zu erhalten.

einfach hinzufügen position: relativ zu Ihrem. Klasse

.expand { 
     position:relative; 
     border: 1px solid black; 
     width: 400px; 
     height: 400px; 
     display: inline-block; 
    } 

erweitern und die Position zu absoluten zu Ihrem aktualisieren. BTN Klasse

.btn { 
     cursor: pointer; 
     position: absolute; 
     top: 150px; 
     left: 150px; 
     border: 1px solid black; 
     width: 40px; 
     height: 40px; 
     vertical-align: middle; 
     text-align: center; 
     line-height: 40px; 
    }