pourquoi ne pas 2 divs inline-block avec la largeur combinée égale à celle du parent s'adapter côte à côte?

Question

Je ne peux pas comprendre cela.

Je peux le faire fonctionner en le faisant flotter, mais je voudrais comprendre pourquoi cela se produit.

pen

Code:

.container { 
 
    width: 1000px; 
 
    height: 400px; 
 
    background-color: purple; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    display: inline-block; 
 
} 
 

 
.item.left { 
 
    width: 70%; 
 
    background-color: green; 
 
} 
 

 
.item.right { 
 
    width: 30%; 
 
    background-color: orange; 
 
}

<div class="container"> 
 
    <div class="item left"></div> 
 
    <div class="item right"></div> 
 
</div>

Answer 1

Si vous vouliez dire pourquoi Dont't ils tiennent côte à côte, c'est parce que les éléments en ligne sont sensibles à l'espace blanc dans votre code. Retirer l'espace entre les divs et ils alignent sur la même ligne côte à côte:

.container { 
 
    width: 1000px; 
 
    height: 400px; 
 
    background-color: purple; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    height: 100px; 
 
    display: inline-block; 
 
} 
 

 
.item.left { 
 
    width: 70%; 
 
    background-color: green; 
 
} 
 

 
.item.right { 
 
    width: 30%; 
 
    background-color: orange; 
 
}

<div class="container"> 
 
    <div class="item left"></div><div class="item right"></div> 
 
</div>