一、css实现左侧宽度固定右侧宽度自适应

1、定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自适应</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .left{

            background: red;

            width: 200px;

            height: 200px;

            position: absolute;/*定位*/

            left: 0;

            top:0;

        }

        .right{

            background: blue;

            height: 200px;

            margin-left: 210px;

        }

    </style>

</head>

<body>

    <div class="left">

        定宽

    </div>

    <div class="right">

        自适应

</div>

</body>

</html>

　2、浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自适应</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .left{

            background: red;

            width: 200px;

            height: 200px;

            float: left;/*浮动*/

        }

        .right{

            background: blue;

            height: 200px;

            margin-left: 210px;

        }

    </style>

</head>

<body>

    <div class="left">

        定宽

    </div>

    <div class="right">

        自适应

</div>

</body>

</html>

　3、margin

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>自适应</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .left{

            background: red;

            width: 200px;

            height: 200px;

        }

        .right{

            background: blue;

            height: 200px;

            margin-top: -200px;/*margin*/

            margin-left: 210px;

        }

    </style>

</head>

<body>

    <div class="left">

        定宽

    </div>

    <div class="right">

        自适应

</div>

</body>

</html>

二、css3弹性盒模型实现自适应

1、上下高度固定中间高度自适应

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body,html{

            height: 100%;

        }

        #contain{

            display: flex;

            flex-direction: column;/*列  垂直方向*/

            height: 100%;/*全屏效果  该元素及其父元素及html、body height：100%*/

        }

        #top{

           height: 200px;

            background: red;

        }

        #center {

            flex: 1;

            background: blue;

        }

        #bottom{

            height: 100px;

            background: green;

        }

    </style>

</head>

<body>

<div id="contain">

    <div id="top">你好</div>

    <div id="center">你好</div>

    <div id="bottom">你也好</div>

</div>

</body>

</html>

2、左侧宽度固定右侧宽度自适应

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #contain {

            display: flex; /*父元素设置该属性*/

        }

        #left {

            width: 100px;

            height: 200px;

            background: #fff8a8;

            margin-right: 10px;

        }

        #right {

            flex: 1; /*所占比例/份数*/

            height: 200px;

            background: #ff9bad;

        }

    </style>

</head>

<body>

<div id="contain">

    <div id="left"></div>

    <div id="right"></div>

</div>

</body>

</html>

　

css和css3弹性盒模型实现元素宽度（高度）自适应的更多相关文章

  1. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  2. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

  3. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  4. CSS3弹性盒模型flexbox布局

    属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器.· box:将对象作为弹性伸缩盒显示. ...

  5. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  6. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  7. CSS3弹性盒模型，Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  8. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  9. CSS3弹性盒模型之box-orient & box-direction

    Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...

随机推荐

  1. [SCOI2016]萌萌哒

    Luogu P3295 mrclr两周前做的题让蒟蒻的我现在做? 第一眼组合计数,如果把数字相同的数位看作一个整体,除了第一位不能为零,剩下的每一位都有$0$~$9$十种. 设不同的位数为$x$,那么 ...

  2. Linux内存管理 (17)KSM

    专题:Linux内存管理专题 关键词:KSM.匿名页面.COW.madvise .MERGEABLE.UNMERGEABLE. KSM是Kernel Samepage Merging的意思,用于合并内 ...

  3. 终于有人把“TCC分布式事务”实现原理讲明白了！

    之前网上看到很多写分布式事务的文章,不过大多都是将分布式事务各种技术方案简单介绍一下.很多朋友看了还是不知道分布式事务到底怎么回事,在项目里到底如何使用. 所以这篇文章,就用大白话+手工绘图,并结合一 ...

  4. Firefox 中出现的 “Network Protocol Error”怎么办

    Mozilla Firefox 多年来一直是我的默认 Web 浏览器,我每天用它来进行日常网络活动,例如访问邮件,浏览喜欢的网站等.今天,我在使用 Firefox 时遇到了一个奇怪的错误.我试图在 R ...

  5. 一段c++代码实现睡眠功能

    #ifdef ACL_UNIX struct timeval tv; tv.tv_sec = delay / 1000; tv.tv_usec = (suseconds_t) (delay - tv. ...

  6. 【学习总结】GirlsInAI ML-diary day-15-读/写txt文件

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day15 认识读/写txt文件 路径: 绝对路径:文件在电脑中的位置 相对路径:下面会用到 1-准备 新建一个 pytho ...

  7. php函数 array_diff

    array_diff ( array $array1 , array $array2 [, array $... ] ) : array 对比 array1 和其他一个或者多个数组,返回在 array ...

  8. Struts2拦截SQL注入

    <interceptors> <!--设置超时拦截器 --> <interceptor name="sessionOut" class="c ...

  9. 其它综合-使用Putty远程连接管理Linux实践

    使用Putty远程连接管理Linux实践 1.获取putty 获取 putty有很多方法,以下是我为大家提供的下载地址: 个人网盘地址,提取码:tz83 官方下载地址 解释: 官方下载的是 zip 压 ...

  10. redis--主从同步,故障切换,集群搭建

    一 . redis主从同步 准备三个配置文件,实现一主两从的redis数据库结构(这三个配置文件仅仅端口不一样) # redis-6379.conf 文件, 写入下面数据: port 6379 dae ...