html - 显示:行内 block 未对齐

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>

这是 plunker

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>