Question

我创建了2个div彼此相邻（左和右）高度相互依赖我只使用display：table-cell for it。如果任何项目在左侧div上有余量，则影响正确的div内容，内容下降，而我增加左div的余量如何解决？谢谢。

HTML：

<div id="container">
<div id="left">
  <p class="prag">
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
  </p>
</div>

<div id="right">
<p class="prag2">
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. 
  </p>
</div>
</div>

CSS：

.prag{
  margin-top:200px;
}
#left{
  width:200px;
  height:auto;
  display:table-cell;
    background-color: red;

}
#right{
  width:200px;
  height:auto;
  display:table-cell;
  background-color: blue;
}

Answer 1

只需使用垂直aling并添加到主div显示：table;

  .prag{
      margin-top:200px;
    }
    #left{
      width:200px;
      height:auto;
      display:table-cell;
        background-color: red;

    }
    #right{
      width:200px;
      height:auto;
      display:table-cell;
      background-color: blue;
      vertical-align: top;

    }
    #container{
    display:table;
    }

内容保证金依赖于其他Div使用显示表格单元格

1 个答案: