arco-design里的col,怎么让左边的高度自适应,右边跟左边高度一样
时间: 2024-02-20 15:58:25 浏览: 148
可以使用flex布局实现左右两个元素高度一致,并使左侧元素高度自适应。具体实现方法如下:
HTML结构:
```html
<div class="arco-design">
<div class="col-left">
<!-- 左侧内容 -->
</div>
<div class="col-right">
<!-- 右侧内容 -->
</div>
</div>
```
CSS样式:
```css
.arco-design {
display: flex;
flex-wrap: wrap;
}
.col-left {
flex: 1 0 auto;
min-height: 100%;
}
.col-right {
flex: 0 0 auto;
height: 100%;
width: 200px; /* 右侧元素宽度 */
}
```
解释一下以上代码的实现过程:
1. 将父容器设置为flex布局,并使用flex-wrap属性使其可以自动换行。
2. 左侧元素(`.col-left`)使用flex属性,`flex: 1 0 auto`表示它会根据剩余空间自适应宽度,但是不会缩小,同时设置`min-height: 100%`使其高度自适应。
3. 右侧元素(`.col-right`)设置`flex: 0 0 auto`表示它不会自适应宽度,同时设置`height: 100%`使其高度与左侧元素高度一致,`width: 200px`表示它的宽度为200px。
这样就可以实现左侧元素高度自适应,右侧元素与左侧元素高度一致的效果了。
阅读全文