<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

   <style>

    html,body{

        height:100%;

    }

    .content{

        height:100%;

        background-color: red;

        position: relative;

        z-index: -3

    }

    .right_top{

        height:400px;

        width: 300px;

        background: yellow;

        z-index: 1

    }

    .right_bottom{

        height:100%;

        background-color: violet;

        width: 300px;

        position: absolute;

        right: 0;

        top: 0;

        z-index: -1

    }

    .l{

        float: right;

    }

    .r{

        height: 100%;width: 400px;float: left;

        background: wheat;

    }

   </style>

</head>

<body>

    <div class="content">

       <div class="r"></div>

        <div class="l">

            <div class="right_top"></div>

        </div>

        <div class="right_bottom"></div>

    </div>

</body>

<script>

</script>

</html>

　　

css float布局--右侧上部固定下部自适应大小的更多相关文章

  1. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  2. css经典布局——头尾固定高度中间高度自适应布局

    转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...

  3. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  4. div css float布局用法

    float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...

  5. css左右布局，左侧固定，右侧自适应

    实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...

  6. css经典布局之左侧固定大小右侧自动适应

    最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...

  7. 你不知道的css各类布局（三）之自适应布局

    自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...

  8. css float 布局

    .clearfix:after { content: ''; display: table; clear: both; } .clearfix {; }

  9. CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)

    经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...

随机推荐

  1. luogu4430 小猴打架

    假硕讲了个prufer编码和Caylay公式 我为了证明prufer编码没用 所以用矩阵树定理证明了Caylay公式 让我们用矩阵树定理推一波 首先这个小猴打架最后会打成一棵树,这棵树是N个点的完全图 ...

  2. 资深专家深度剖析Kubernetes API Server第3章（共3章）

    在本系列的前两部分中我们介绍了API Server的总体流程,以及API对象如何存储到etcd中.在本文中我们将探讨如何扩展API资源. 在一开始的时候,扩展API资源的唯一方法是扩展相关API源代码 ...

  3. redhat7查看系统版本 修改主机名

    在CentOS或RHEL中,有三种定义的主机名:静态的(static),瞬态的(transient),以及灵活的(pretty).“静态”主机名也称为内核主机名,是系统在启动时从 /etc/hostn ...

  4. CF671A Recycling Bottles 计算几何

    It was recycling day in Kekoland. To celebrate it Adil and Bera went to Central Perk where they can ...

  5. Exadata扩展

    所谓Exadata扩展,也即向现有的Exadata环境中增加新的数据库服务器或存储服务器. 扩展原则 可以依循以下规则扩展Exadata: (1).可以将Exadata从某种固定配置扩展到另一种固定配 ...

  6. js判断字符串是否有下划线

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. java编程技巧和心得

    1.在一个类中修改或调用另一个类的变量: 只需要将该变量用public static 这个修饰符修饰,再用类名直接调用即可 2.实现对只有下标不同变量的操作 解决思路:可以将这些变量放在一个数组里,在 ...

  8. adminLte 解决菜单栏 bug

    <ul class="sidebar-menu" data-widget="tree">    功能菜单 点击 不隐藏第三级 子菜单....在 ad ...

  9. 使用YARN修改中国镜像

    官网地址 下载安装 https://yarnpkg.com/zh-Hans/   查看仓库使用地址 yarn config set registry 设置为淘宝镜像 yarn config set r ...

  10. nginx配置文件企业优化

    1.1 企业规范优化Nginx配置文件 第一个里程碑:创建扩展目录,生成虚拟主机配置文件 mkdir extra sed -n '10,15p' nginx.conf >extra/www.co ...