html - div的高度随着相对div的增加而增加

Question

我有父 div，在父 div 里面我有两个 child 都有属性 diplay:inline-block。当右侧子内容增加时，右侧子高度自动调整，但左侧子高度不调整

这是我的代码结构

<div class="maskbody">
  <div class="leftchild"></div>
  <div class="rightchild"></div>
</div>

这是我的CSS

.maskbody
 {
   width: 600px;
   height: auto;
   overflow: hidden;
   position: relative;
   top: 25%;
   background-color: #fff;
}

.leftchild
 {
   display: inline-block;
   background-color:red;
 }

 .rightchild
 {
   display: inline-block;
   background-color:#fff;
 }

所以我希望如果 rightchild 内容增加，那么 leftchild 高度会自动增加

Answer 1

使用 display:table-cell 代替 display:inline-block。

 .leftchild
{
 display: table-cell;
 background-color:red;
}

.rightchild
{
display: table-cell;
background-color:green;
}

DEMO