display:inline-块未对齐

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

或将此添加到您的 parent div

.parent{
  display: flex;
}

Answer 2

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>

display:inline-块未对齐

display:inline-block not aligned

html

css

display