前端VUE如何实现Div自适应等高
1.利用padding实现
样式部分:
.content{
overflow: hidden;
margin:auto /* 看自己需要设置,不影响div高度变化*/
}
.left{
background-color: blue;
float: left;
width: 30%;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.right{
background-color: yellow;
float: left;
width: 70%;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
代码部分:
<div class="content">
<div class="left">
/*自定义内容,可绑定数组*/
</div>
<div class="right">
/*自定义内容,可绑定数组*/
</div>
</div>`
2.利用table-cell实现
样式部分:
.right,
.left{
display: table-cell;
border: 1px solid rebeccapurple;
width: 200px;
}
代码部分:
<div class="left">
<p>1</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
<p>2</p>
</div>
<div class="right">
<p>1</p>
</div>