显示:行内块未对齐

Question

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

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

代码:

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

这是活塞

Answer 1

inline-block默认为vertical-align:baseline，所以设置为vertical-align:top

我改进了你的CSS，看看:

.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

或者将其添加到父div

.parent{
  display: flex;
}