CSS布局上-左右

2022-07-19  本文已影响0人  我叫杨毅
 <div class="oeePage">
        <div class="oeePage_title"></div>
        <div class="oeePage_content">
            <div class="contet_c oeePage_content_l"></div>
            <div class="contet_c oeePage_content_r"></div>
        </div>
   </div>
<style lang="scss" scoped>
.oeePage {
    width: 100%;
    height: calc(calc(100vh - 50px - 38px - 30px));
    display: flex;
    flex-direction: column;
    .oeePage_title {
        background: #fff;
        margin-bottom: 10px;
        height: 60px;
    }
    .oeePage_content {
        width: 100%;
        flex: 1;
        overflow: hidden;
        display: flex;
        .contet_c {
            //flex: 1; 左右平均分, 去掉注释
            height: 100%;
            overflow: hidden;
            background: #fff;
        }
        .oeePage_content_l {
            margin-right: 5px;
            width: 40%;// 左边40%大小
        }
        .oeePage_content_r {
            margin-left: 5px;
            width: 60%;// 右边60%大小
        }
    }
}
</style>
image.png
上一篇 下一篇

猜你喜欢

热点阅读