<div id="#warp">
    <div class="left">
    <div class="right">right</div>
#box {
    overflow: hidden;
    height: 200px;
.left,
.right {
    float: left;
    border: 1px solid red;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
每个div使用display:table-cell
.left,
.right {
    padding: 10px;
    display: table-cell;
    border: 1px solid #f40;
父元素使用display:box
.wrap {
    display: -webkit-box;
.left,
.right {
    padding: 10px;
    border: 1px solid #f40;
  
注意：一定要加类似-webkit- 兼容性处理。
使用flex布局。
flex-direction 属性定义的主轴方向， 默认值为row， 水平展示。
align-item属性定义子项在flex容器的当前行的侧轴方向的对齐方式， 默认为stretch，元素被拉伸以适应容器。
.wrap {
    display: flex;
.left,
.right {
    flex: 1;
效果如下图：
  
https://www.cnblogs.com/cbza/p/7145384.html