Anzeige: Inline-Block nicht ausgerichtet

Question

Ich versuche, einige nebeneinander nebeneinander mit display:inline-block anzuzeigen.

Leider ist die Ausrichtung durcheinander. Warum ist das so?

Code:

.leftBox { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    display: inline-block; 
 
} 
 
.rightBox { 
 
    display: inline-block; 
 
} 
 
.topBox { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: yellow; 
 
} 
 
.bottomBox { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: orange; 
 
}

<div> 
 
    <div class='leftBox'>d1</div> 
 
    <div class='rightBox'> 
 
    <div class='topBox'>d2</div> 
 
    <div class='bottomBox'>d3</div> 
 
    </div> 
 
</div>

Hier ist die plunker

Answer 1

inline-block ist vertical-align:baseline standardmäßig, es ist so eingestellt vertical-align:top

ich Ihre CSS verbessert, werfen Sie einen Blick:

.box { 
 
    font-size: 0 
 
    /*fix inline-block gap */ 
 
} 
 
.leftBox, 
 
.rightBox { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 100px; 
 
    height: 100px; 
 
    font-size: 16px; 
 
    /* reset font */ 
 
} 
 
.rightBox > div { 
 
    height: 50px 
 
} 
 
.leftBox { 
 
    background-color: green; 
 
} 
 
.topBox { 
 
    background-color: yellow; 
 
} 
 
.bottomBox { 
 
    background-color: orange; 
 
}

<div class='box'> 
 
    <div class='leftBox'>d1</div> 
 
    <div class='rightBox'> 
 
    <div class='topBox'>d2</div> 
 
    <div class='bottomBox'>d3</div> 
 
    </div> 
 
</div>

Answer 2

Oder fügen Sie diese zu Ihren Eltern div

.parent{ 
    display: flex; 
}