Question

我有父div，在父div中我有两个孩子都有属性 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;
 }

所以我希望如果右边的内容增加，那么左边的高度会自动增加

Answer 1

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

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

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

DEMO

Answer 2

在右子div之后但在maskbody div中添加一个带有clear（）的空div 然后在CSS中添加此内容：
.clear {clear：both;}

Answer 3

或者再使用一个选项......

HTML

<div class="maskbody">
   <div class="leftchild">
      <p> demo text demo text demo text </p>
      <p> demo text demo text demo text </p>
      <p> demo text demo text demo text </p>
   </div>
   <div class="rightchild">

   </div>
</div>

CSS

.maskbody {
   width: 600px;
   height: auto;
   overflow: hidden;
   position: relative;
   top: 25%;
   background-color:green;  
 }
 .leftchild {
   background-color:red;
   width:50%;
   float:left;
 }
.rightchild {
  width:50%;
  float:left;
 }

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

3 个答案: