Почему мой блок div будет перемещаться, когда внутри есть контент?

Question

.role_wrapper1,.role_wrapper2 { 
 
    display:inline-block; 
 
} 
 

 

 
.role_wrapper1 { 
 
    width:200px; 
 
    height:230px; 
 
    border: 2px solid rgba(204, 204, 204, 0.2); 
 
    border-radius: 10px; 
 
    margin-right:6px; 
 
} 
 

 
.role_wrapper2 { 
 
    width:200px; 
 
    height:230px; 
 
    margin-right:10px; 
 
    background-color: #f8f8f8; 
 
    border-radius: 10px; 
 
}

<div class="role_wrapper1">1</div> 
 
<div class="role_wrapper2"></div>

Без содержания внутри див1, эти два будут отображаться правильно. Однако, когда я помещаю некоторый контент в div1, div2 будет сдвигаться.

Я что-то упустил?

Answer 1

Вы не хватает: float:left

.role_wrapper1,.role_wrapper2 { 
 
    display:inline-block; 
 
} 
 

 

 
.role_wrapper1 { 
 
    width:200px; 
 
    height:230px; 
 
    border: 2px solid rgba(204, 204, 204, 0.2); 
 
    border-radius: 10px; 
 
    margin-right:6px; 
 
    float:left 
 
} 
 

 
.role_wrapper2 { 
 
    width:200px; 
 
    height:230px; 
 
    margin-right:10px; 
 
    background-color: #f8f8f8; 
 
    border-radius: 10px; 
 
}

<div class="role_wrapper1">1hjghjjgj</div> 
 
<div class="role_wrapper2"></div>