现有左右两个div,右边div的高度会随着js加载内容的多少发生变化;怎么样通过css来实现,当右边div通过js加载内容导致高度增加时,左边的div高度依然和右边高度一...
现有左右两个div,右边div的高度会随着js加载内容的多少发生变化;
怎么样通过css来实现,当右边div通过js加载内容导致高度增加时,左边的div高度依然和右边高度一样?
css3 的display:flex可以实现。
demo:
html结构
<div class="flex-box">
<div class="col">
<p>左侧内容</p>
</div>
<div class="col">
<p>右侧内容</p><p>右侧内容</p>
</div>
</div>
样式
<style>
.flex-box {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
color:white;
}
.flex-box>.col{
flex: 1;
padding: 20px;
}
.flex-box>.col:first-child {
background: red;
-webkit-order: 1;
-ms-flex-order: 1;
order: 0;
}
.flex-box >.col:last-child {
background: black;
-webkit-order: 0;
-ms-flex-order: 0;
order: 1;
}
</style>