美文网首页
CSS布局上-左右

CSS布局上-左右

作者: 我叫杨毅 | 来源:发表于2022-07-19 14:51 被阅读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

相关文章

  • CSS布局上-左右

  • css布局和居中

    本文主要介绍了css常用的布局,居中等其他小技巧。 css布局 左右布局 利用float实现左右布局 左右模块设置...

  • CSS的布局与居中

    css的布局 css左右布局 双浮动|左右布局: 双浮动: 在子元素下面添加float,在父元素上面加上clear...

  • css布局

    最近在学习css相关的知识,本文主要总结一些css布局相关的知识。 一、左右布局和左中右布局 左右布局和左中右布局...

  • CSS布局技巧

    最近学习了CSS的一些知识,下面总结一下我学到的CSS布局技巧 1.左右布局 (1). 浮动左右布局也叫横向布局,...

  • 浅析 CSS 布局与定位

    浅析 CSS 布局与定位 较多内容参考:CSS布局与定位入门 一、左右布局 float + clearfix块级元...

  • 2019-04-04

    关于如何使用css布局 左右布局 在页面开发过程中要对页面进行左右布局排版,如何使用css的相关知识来做到呢? 以...

  • css左右布局+上下布局

  • css写布局

    一:左右布局 1.用float浮动来实现左右布局:HTML代码: css代码: 演示: 2用绝对定位来实现左右布局...

  • 前端面试知识点

    css 盒模型 布局 左右布局 上下布局 display position nodejs 文件 流 express...

网友评论

      本文标题:CSS布局上-左右

      本文链接:https://www.haomeiwen.com/subject/izzjirtx.html