Question

我有2个div元素，同一个类紧挨着。他们的风格display: inline-block。如何将它们放在图片所示的相同高度：

Answer 1

为div添加vertical-align:top规则。内联元素的默认垂直对齐方式为baseline。

Answer 2

使用垂直对齐将div与顶部对齐

＆＃13;

.mDiv{
  display:inline-block;
  vertical-align:top;
  width:300px;
  height:200px;
  background-color:red;
  float:left;
}

.mDiv2{
  display:inline-block;
  vertical-align:top;
  width:300px;
  height:50px;
  background-color:blue;
   float:left;
}

＆＃13;

<html>
<head>
</head>
<body>
<div class='mDiv'>1</div>
<div class='mDiv2'>2</div>
</body>



</html>

＆＃13;

Answer 3

我会浮动：离开它们而不是显示：inline-block

使用＆＃34;内联块＆＃34;用于多个div标签

3 个答案: