css float布局--右侧上部固定下部自适应大小
<!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布局--右侧上部固定下部自适应大小的更多相关文章
- CSS百分比padding实现比例固定图片自适应布局
一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...
- css经典布局——头尾固定高度中间高度自适应布局
转载:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的 ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- div css float布局用法
float的应用与用法 想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向 ...
- css左右布局,左侧固定,右侧自适应
实现布局的几种方法,见代码: <!DOCTYPE html> <html lang="cn"> <head> <meta charset= ...
- css经典布局之左侧固定大小右侧自动适应
最近学习了一种经典布局,固定左侧或右侧的宽度,另一侧自适应宽度,此种布局挺常用,尤其是像后台,大部分都是采用这种结构,还比如像订餐类的APP,进入商家的时候,会出现一堆饭的列表,左侧是饭的分类,右侧是 ...
- 你不知道的css各类布局(三)之自适应布局
自适应布局 概念 自适应布局(Adaptive Layout)是对凡是有自适应特性的一类布局的统称 自适应布局使用media query来检测当前浏览器的宽度进而通过CSS样式调整页面大小.自适应布局 ...
- css float 布局
.clearfix:after { content: ''; display: table; clear: both; } .clearfix {; }
- CSS自适应布局(左右固定 中间自适应或者右侧固定 左侧自适应)
经常在工作中或者在面试中会碰到这样的问题,比如我想要个布局 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题. 下面我们分别来学习下,当然我也是总结下而已,有如以下方法: 一: 右 ...
随机推荐
- RouteSelector的初始化
继前面的几篇OKhttp的拦截器简单分析之后,对于后续Okhttp之间的分析自己也着实琢磨了一段时间,是分析RealConnection?还是ConnectionPool,随着对Okhttp源码的深入 ...
- The Datawarehouse's future is bright
The Future Data Warehouse Professionals I hava remarked many times that a successful data warehouse ...
- 剑指offer —— 二维数组的查找
1.问题:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 2.思路:只看题目本身 ...
- 缩点【洛谷P2860】 [USACO06JAN]冗余路径Redundant Paths
P2860 [USACO06JAN]冗余路径Redundant Paths 为了从F(1≤F≤5000)个草场中的一个走到另一个,贝茜和她的同伴们有时不得不路过一些她们讨厌的可怕的树.奶牛们已经厌倦了 ...
- CF671A Recycling Bottles 计算几何
It was recycling day in Kekoland. To celebrate it Adil and Bera went to Central Perk where they can ...
- CF352A Jeff and Digits
Jeff's got n cards, each card contains either digit 0, or digit 5. Jeff can choose several cards and ...
- 5.mybatis 多参数传递 -分页
需求 :分页 方法一:使用下标来进行赋值,下标从零开始 mapper.xml <select id="selectByPage" resultMap="blog ...
- ubuntu14.04 apt-get install找不到软件,更换源解决
安装14.04后,有时使用apt-get命令安装程序,会提示找不到程序,这是因为软件源不正确,网上说的换163的.中科大的.阿里的等等,我在更新源的时候都会出错,一般是报404错误,网上也没找到好的办 ...
- 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_发布者策略控制
在 读经典——<CLR via C#>(Jeffrey Richter著) 笔记_高级管理控制(配置)中,是由程序集的发布者将程序集的一个新版本发送给管理员,后者安装程序集,并手动编辑应用 ...
- 前端CSS css引入方式 css选择器 css选择器优先级
一. CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...