div并排且高度相同非指定高度非js实现方法

上一篇介绍了实现几个div并排居中点这里，但是指定了高度，但最近一个小项目中需要实现两个div不设定高度，但始终两个div高度始终相等，

这里是主布局
<div class="container">
  <div id="dplayer"></div>
    <div id="list"></div>
</div>

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

.container {
	width: 80%;
	background-color: #FFF;
	margin: 0 auto;
	border: 1px solid #F00;
	display: table;

}
#dplayer {
	width: 80%;
	display: table-cell
}
#list {
	width: 20%;
	background: #000;
	display: table-cell
}

但是这样有一个缺点，display: table-cell无法指定高度，宽度，margin.....

另一种实现方式display: -webkit-box;

.container {
    width: 80%;
    background-color: #FFF;
    margin: 0 auto;
    border: 1px solid #F00;
    display: -webkit-box;
}
#dplayer {
    width: 80%;
}
#list {
    width: 20%;
    background: #000;
}

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

具体实现方式有很多方法，比如table，displa:fix等等，这里就不多说了

div并排且高度相同非指定高度非js实现方法

原文：https://www.cnblogs.com/cgldl/p/10994331.html