<!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. Spark大数据处理 之 从WordCount看Spark大数据处理的核心机制（2）

    在上一篇文章中,我们讲了Spark大数据处理的可扩展性和负载均衡,今天要讲的是更为重点的容错处理,这涉及到Spark的应用场景和RDD的设计来源. Spark的应用场景 Spark主要针对两种场景: ...

  2. 最短路【bzoj1726】: [Usaco2006 Nov]Roadblocks第二短路

    1726: [Usaco2006 Nov]Roadblocks第二短路 Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她 ...

  3. 状压DP 【洛谷P3694】 邦邦的大合唱站队

    [洛谷P3694] 邦邦的大合唱站队 题目背景 BanG Dream!里的所有偶像乐队要一起大合唱,不过在排队上出了一些问题. 题目描述 N个偶像排成一列,他们来自M个不同的乐队.每个团队至少有一个偶 ...

  4. luogu1447 [NOI2010]能量采集 莫比乌斯反演

    link 冬令营考炸了,我这个菜鸡只好颓废数学题了 NOI2010能量采集 由题意可以写出式子: \(\sum_{i=1}^n\sum_{j=1}^m(2\gcd(i,j)-1)\) \(=2\sum ...

  5. C++基础学习8：类的定义(class)

    先来说说C和C++中结构体的不同 a) C语言中的结构体不能为空,否则会报错(??) b) C语言中内存为空结构体分配大小为0,C++中为结构体和类分配大小为1byte c) C语言中的结构体只涉及到 ...

  6. 洛谷 P1028 数的计算

    嗯... 首先这道题想到的就是递推.... 但是递推失败 (不知道自己是怎么想的 然后又想打一个暴力,但是数的最高位太难存储了,所以又放弃了(并且好像这个暴力大约500就会炸... 然后看了题解,才发 ...

  7. POJ1059 Chutes and Ladders

    题目来源:http://poj.org/problem?id=1059 题目大意: 有一种叫做“Chutes and Ladders”(梯子和滑梯)的简单游戏.游戏在一块棋盘上进行,棋盘上有编号从1- ...

  8. js 遍历tree的一个例子（全遍历）,更复杂的功能

    更复杂的功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. dynamic：动态类型简单用法，写法

    class 动态创建数据 { //动态类型:本质感觉跟object的用法差不多,只是在执行的时候才知道数据类型 public dynamic Dynamic() { //定义一个动态类型,作为返回值 ...

  10. Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap

    转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...