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

【问题标题】：Height of div increase with relative divdiv的高度随着相对div的增加而增加
【发布时间】：2014-11-21 15:07:16
【问题描述】：

我有父 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;
 }

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

【问题讨论】：

标签： html css height auto-increment

【解决方案1】：

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

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

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

DEMO

【讨论】：

感谢 Suresh，但我希望与所有浏览器兼容。可能是这些属性
为什么不呢？你试过吗？
不，我还没试过。我只是询问浏览器的兼容性。此属性是否适用于所有浏览器？
对不起库沙尔。这是一个非常基本的问题，我们有很多类似的问题。

【解决方案2】：

在右子 div 之后但在 maskbody div 内添加一个带有 clear( ) 类的空 div。
然后在 CSS 中做广告：
.clear{ 清除：两者；}

【讨论】：

【解决方案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;
 }

【讨论】：