css左固定右自适应常用方法

chengjianhua 发布于2019-04-23 13:40 / 2815人阅读

摘要：下面是几种方法的公用部分右自适应也是一样的，换一下方向我是固定的我是自适应的左脱离文档流，右左左布局左定宽，右设置为，自动伸展，此处注意兼容性，可以通等后处理器自动加上前缀效果图如下

下面是几种方法的公用部分（右自适应也是一样的，换一下方向）

html:

<div class="demo">
<div class="sidebar">我是固定的div>
<div class="content">我是自适应的div>
div>

css:

.sidebar,.content{
height: 300px;
}
.sidebar{
background-color: red;
width: 300px;
}
.content{
background-color: green;
}

1. 左脱离文档流，右margin

1.1 左float

        .demo .sidebar{
            float: left;
        }
        .demo .content{
            margin-left: 310px;
        }

1.2 左absolute

        .sidebar{
            position: absolute;
            top: 0;
            left: 0;
        }
        .content{
            margin-left: 310px;
        }

2. flex布局（左定宽，右flex设置为1，自动伸展，此处注意flex兼容性，可以通postcss等后处理器自动加上前缀）

        .demo{
            display: flex;
        }
        .sidebar{
            width: 300px;
            margin-right:10px;
        }
        .content{
            flex: 1;
        }

效果图如下：

GPU云服务器云服务器 css自适应 css图片自适应 asp 自适应css query常用方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2188.html

CSS布局——左定宽度右自适应宽度并且等高布局

摘要：今天有位朋友一早从妙味课堂转来一个有关于布局的面试题，需要解决，花了点时间写了几个放上来与大家分享受。今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题，需要解决，花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧：左侧固定宽，右侧自适应屏幕宽；左右两列，等高布局；左右两列要求有最小高度，例如：200px;（当内容超出...

dreamtecher 2019-08-29 12:43 评论0 收藏0
常见的面试问题：【CSS】已知高度，写出三栏布局

摘要：问题已知高度，写出三栏布局，其中左右两栏宽度各位，中间自适应回答效果示例解决方案浮动绝对定位弹性布局表格布局网格布局。方案二绝对定位将和的都设置脱离文档流，给的设置左右两边距离即左右两边盒子的实际宽度。问题：已知高度，写出三栏布局，其中左右两栏宽度各位200px，中间自适应showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 评论0 收藏0
三栏布局（一）-------左右宽高固定，中间自适应

摘要：幼圆常见的页面布局有幼圆左右宽度固定，中间自适应幼圆上下高度固定，中间自适应幼圆左宽度固定，右自适应幼圆上高度固定，下自适应，幼圆下边是我看过网上的视频后写出来的三栏布局左右宽高固定，中间自适应幼圆有种布局方常见的页面布局有 1、左右宽度固定，中间自适应； 2、上下高度固定，中间自适应； 3、左宽度固定，右自适应； 4、上高度固定，下自适应，下边是我看过网上的视频后写出来的三栏布局-左右宽...

Aldous 2019-04-23 13:08 评论0 收藏0
CSS3中display属性的Flex布局-圣杯布局实例

摘要：负值对该属性无效。我们通常用到的就是这个属性，在布局的时候会很有用。对于这个属性，最好是手动敲一下，尝试一下各种值出现的效果。三圣杯布局布局一直是很重要的知识点，在面试中也会经常遇到，这里就用做一个圣杯布局。一，为什么写这篇文章在很早之前就接触display：flex布局，尤其是不考虑低版本浏览器兼容之后，就开始肆无忌惮的使用了。之前做pc端的时候，要求兼容到ie8，也不会注意到它...

pinecone 2019-08-29 15:33 评论0 收藏0