为什么我的div块会在里面有一些内容时移动？

Question

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

div1中没有任何内容，这两个内容将正确显示。 但是，当我在div1中放入一些内容时，div2会移位。

我错过了什么吗？

Answer 1

您遗失了：float:left

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;