父元素高度不确定，子元素左右等高的div布局

上一篇介绍了实现几个div并排居中点这里，但是指定了高度，这篇文字主要说一下父元素高度不确定，子元素左或右高度不确定且高度相同布局div盒子

三个div盒子如下
<div class="container">
  <div id=left"></div>
    <div id="right"></div>
</div>

第一种：表格布局display: table+display: table-cell方式：

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
display: table;
height: 200px;/*高度无效*/
}
#left {
width: 80%;
background: #063;
display: table-cell;
}
#right {
width: 20%;
background: #0C3;
display: table-cell;
}

 

但是这样有一个缺点，display: table-cell无法指定高度，宽度，等属性，高度有内容撑高。左右高度一致，由最高的一个决定。

 

第二种：display: -webkit-box/fiex实现

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
display: -webkit-box;
}
#left {
width: 80%;
background: #063;
/*max-height:200px;/*由内容撑高，设置最大高度，多的出现滚动条*/
}
#right {
width: 20%;
background: #0C3;
max-height:200px;/*由内容撑高，设置最大高度，多的出现滚动条*/
}

运行结果和上面一样，但可以设定最高的div的max-height，不至于使内容少的一个看上去太孤单，像这样

 

第三种：使用绝对定位的方式来实现（推荐使用）

.container {
width: 80%;
background-color: #FFF;
margin: 0 auto;
border: 1px solid #F00;
position: relative;
}
#left {
width: 80%;
background: #063;
max-height:200px;/*由内容撑高，设置最大高度，多的出现滚动条*/
}
#right {
width: 20%;
background: #0C3;
position: absolute;
height: 100%;/*高度依赖父元素，父元素由左边撑高，*/
right: 0px;
top: 0px;
}

结果如图

 

转载于:https://www.cnblogs.com/cgldl/p/10994331.html