顯示：行內塊未對齊

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> 

這是pl子

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