css自适应布局

心已赠人 2024-04-17 05:51 66阅读 0赞

左侧固定，右侧自适应

<div class="all">
        <div class="left">
            aaa
        </div>
        <div class="right">
                <div class="right_a">
                    ccc
                </div>
            <div class="right_all">
                <div class="right_d">
                    ddd
                </div>
            </div>
        </div>
    </div>

<style>
        html,body{
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            background-color: red;
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -webkit-box-pack: center;
        }
        /*.left{*/
            /*flex: 1;*/
        /*}*/
        .right{
            flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            background-color: #0bbcbf;
            position: relative;
        }
        .right_all{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            display: -webkit-box;
            display: -ms-flexbox;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            -ms-flex-align: center;
            -ms-flex-pack: center;
        }
        .right_a{
            background-color: #0000cc;
            text-align: center;
        }
        .right_d{
            height: 3rem;
            background-color: #1dc578;
            width: 1200px;
            text-align: center;
        }
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，66人围观）

还没有评论，来说两句吧...

相关阅读

相关 css自适应布局

侧固定，右侧自适应 <!--flex和box是两种不同的自适应布局方式，功能类似，但写法不同，flex的兼容性更高以下布局优先使用box布局（...

心已赠人/ 2024年04月17日 05:51/ 0 赞/ 67 阅读

相关自适应布局

常见自适应布局有两种：左侧固定右侧自适应、左右两侧固定中间自适应左侧固定，右侧自适应 1、子元素 float:left // html部分 <div c

梦里梦外;/ 2023年08月17日 17:39/ 0 赞/ 136 阅读

相关 CSS - 响应式布局/自适应 - 学习/实践

1.应用场景 <table> <tbody> <tr> <td> <p>主要用于学习了解掌握响应式布局及其原理，</p> <p>快速进行响应式布局开发.</

小咪咪/ 2022年12月08日 12:55/ 0 赞/ 249 阅读

相关 css3自适应布局单位vw,vh

视口单位(Viewport units) 什么是视口？在PC端，视口指的是在PC端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewpor

- 日理万妓/ 2022年11月21日 14:55/ 0 赞/ 213 阅读

相关 CSS多种三列自适应布局实现

文章目录第一种：基于float实现第二种：基于position：absolute实现第三种：基于dis

迈不过友情╰/ 2022年11月09日 11:21/ 0 赞/ 291 阅读

相关 CSS自适应布局

什么是布局，其实就是用定位和尺寸相关的属性来完成布局，布局会用到的有：普通流、浮动、绝对定位三种定位机制，CSS3中的transform、flex等先来说float浮动，现

朱雀/ 2022年07月12日 12:22/ 0 赞/ 314 阅读

相关 css 布局自适应

css布局自适应布局一般就是左右2栏目(其中一栏固定一栏自适应) 左中右3栏(一般中间自适应) 2栏目左边固定右边自适应外

Love The Way You Lie/ 2022年06月10日 11:42/ 0 赞/ 368 阅读

相关 CSS布局 -- 左右定宽，中间自适应

左右定宽，中间自适应 ![200929295746183.png][] 有几种方法可以实现改变窗口大小看看？方案一：左右设置绝对定位，定宽，中间设置margin

分手后的思念是犯贱/ 2021年12月17日 06:34/ 0 赞/ 404 阅读

相关 css3自适应布局单位vw,vh

视口单位(Viewport units) 什么是视口？在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（

阳光穿透心脏的1/2处/ 2021年09月29日 08:58/ 0 赞/ 360 阅读

相关 CSS自适应布局分

自适应布局分两类：高度和宽度，方法有很多，我用三列布局举例，我就列几个通俗易懂的例子呗，懂了三列的，两列的原理一样，呵呵哒。效果图如下：高度自适应——宽度自适应 ![79

小灰灰/ 2021年09月18日 03:36/ 0 赞/ 453 阅读