display：内联块未对齐

Question

我正在尝试使用display:inline-block并排显示彼此相邻的一些方框。

不幸的是，对齐混乱了。为什么会这样？

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>

这是plunker

Answer 1

默认情况下，

inline-block为vertical-align:baseline，因此请将其设为vertical-align:top

我改进了你的CSS，看看：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

或者将其添加到您的父div

.parent{
  display: flex;
}