1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.    <style>
  9.     html,body{
  10.         height:100%;
  11.     }
  12.     .content{
  13.         height:100%;
  14.         background-color: red;
  15.         position: relative;
  16.         z-index: -3
  17.     }
  18.     .right_top{
  19.         height:400px;
  20.         width: 300px;
  21.         background: yellow;
  22.         z-index: 1
  23.     }
  24.     .right_bottom{
  25.         height:100%;
  26.         background-color: violet;
  27.         width: 300px;
  28.         position: absolute;
  29.         right: 0;
  30.         top: 0;
  31.         z-index: -1
  32.     }
  33.     .l{
  34.         float: right;
  35.     }
  36.     .r{
  37.         height: 100%;width: 400px;float: left;
  38.         background: wheat;
  39.     }
  40.    </style>
  41. </head>
  42. <body>
  43.  
  44.     <div class="content">
  45.        <div class="r"></div>
  46.         <div class="l">
  47.             <div class="right_top"></div>
  48.         </div>
  49.         <div class="right_bottom"></div>
  50.     </div>
  51.  
  52. </body>
  53. <script>
  54.  
  55. </script>
  56. </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. Ceph配置文件查看修改方式

    1.     修改ceph配置文件的方式有三种:(其中包含临时和永久生效) 1)      修改所有或者指定的进程 2)      修改当前服务器进程 3)      修改配置文件 Note:在线修改 ...

  2. 树状数组 P3605 [USACO17JAN]Promotion Counting晋升者计数

    P3605 [USACO17JAN]Promotion Counting晋升者计数 题目描述 奶牛们又一次试图创建一家创业公司,还是没有从过去的经验中吸取教训--牛是可怕的管理者! 为了方便,把奶牛从 ...

  3. [转]Groovy Goodness

    http://mrhaki.blogspot.com/2014/12/gradle-goodness-continue-build-even.html 介绍了不少使用Groovy编写脚本的好例子,可以 ...

  4. C语言初步学习I/O函数scanf、getchar、printf和putchar

    scanf().printf().getchar()和putchar()这四个函数能够让用户和程序交流,所以被称为输入/输出函数,或简称为I/O函数. 这里先结合缓冲输入来讲讲scanf()和getc ...

  5. [转载]jQuery中的html，val，text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

  6. Ubuntu14上安装Mongo3.2

    1. 安装 sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys D68FA50FEA312927 echo "deb ...

  7. 简述wcf应用

    一.新建wcf 如下图:wcf可以简历俩种形式 1.库文件,就是一个类库文件,可以用windows服务或控制台开启. 2.服务应用程序,可以直接IIS上面发布. 二.库文件自动生成的类 接口类 usi ...

  8. java向mysql中写入中文出现乱码

    乱码的原因有很多,我遇到的原因是url配置的问题,解决方案: 将: jdbc.url=jdbc:mysql://localhost:3306/XXXX?useUnicode=true&char ...

  9. 结合element-ui表格自动生成sku规格列表

    最近在写一个根据输入的规格,属性值动态生成sku表格,实现的效果大致如图,这是在vue项目里,结合element-UI表格写的,写好了就整理了一下,把代码贴上来,方便以后使用,不过代码里还是有一些重复 ...

  10. 爬虫（GET）——add_header()和get_header()

    import urllib.request import random url = "http://www.baidu.com/" # 可以是User-Agent列表,也可以是代理 ...