css圣杯布局
HTML
<div class="container">
<div class="content">content</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css样式
.container{
padding-left: 200px;
padding-right: 150px;
}
.content {
background: pink;
width: 100%;
float: left;
}
.left{
width:200px;
background: blue;
float: left;
margin-left: -100%;
position: relative;
right: 200px;
}
.right{
width: 150px;
background: green;
float: left;
margin-right: -150px;
}
css圣杯布局的更多相关文章
- css圣杯布局的实现方式
css圣杯布局思路: 外面一个大div,里面三个小div(都是浮动).实现左右两栏宽度固定,中间宽度自适应.中间栏优先渲染. 资源网站大全 https://55wd.com 设计导航https://w ...
- CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...
- CSS 圣杯布局 / 双飞翼布局的实现
工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...
- CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...
- CSS 圣杯布局
前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握. 事实上,圣杯布局其实和双飞翼布局是一回事.它们实现的都是三栏布局, ...
- css——圣杯布局
圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...
- css圣杯布局、等高布局
所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...
- CSS圣杯布局、双飞翼布局详解
三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...
- CSS布局 -- 圣杯布局 & 双飞翼布局
按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...
随机推荐
- 开发一个 Parcel-vue 脚手架工具
前言 像我们熟悉的 vue-cli,create-react-app 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目.在实际工作中,我 ...
- 2019牛客暑期多校训练营(第三场) - J - LRU management - 模拟
https://ac.nowcoder.com/acm/contest/883/J 根据这个数据结构的特点,也就是计算机组成原理里面学过的cache的LRU管理算法,每次访问都会在cache中查询一页 ...
- hihocoder1954 : 压缩树
传送门 首先求出缩一个点 $x$ 的贡献,就是缩 $x$ 的父亲的贡献加上 $x$ 的子树多减少的深度 假设此时缩父亲的贡献已经考虑过了,那么 $x$ 的子树多减少的深度就是子树的节点数 注意此时要满 ...
- ISC2016训练赛 phrackCTF--Classical CrackMe
测试文件:https://static2.ichunqiu.com/icq/resources/fileupload/phrackCTF/REVERSE/CrackMe.rar 1.准备 获得信息 3 ...
- CSS利用border绘制图性
绘制梯形 width:10px; border-top:10px solid red; border-right:10px solid transparent; border-left:10px so ...
- CentOS 6.5下源码安装LAMP(Linux+Apache+Mysql+Php)环境
---恢复内容开始--- 一.系统环境 系统平台:CentOS 6.5 (Final) Apache版本:httpd-2.2.31.tar.gz(最新版本2015-07-16) Mysql 版本:my ...
- 如何官网下载chrome谷歌浏览器离线安装包
目录 1. 下载步骤 2. 将语言更改为中文 3. 插件 3.1. chrome 网上应用店 3.1.1. google-access-helper 4. 更新失败 1. 下载步骤 注意 需要梯子才能 ...
- pppd - 点对点协议守护进程
总览 SYNOPSIS pppd [ tty_name ] [ speed ] [ options ] 描述 点对点协议 (PPP) 提供一种在点对点串列线路上传输资料流 (datagrams)的方法 ...
- device eth0/1 does not seem to be present, delaying initialization
vmlite虚拟机启动出错,就把这个虚拟机删除掉重新建立,系统虚拟硬盘使用之前的,启动系统后不能上网,通过ifconfig查看网卡没启动,遂启动网卡服务,但是出错,就是:device eth0 doe ...
- TCP窗口
一.窗口移动1.在建立TCP连接时,接收端会告诉发送端自己的接收窗口.2.发送端在发送数据时,会先为数据分包,编号,然后先发送窗口大小的数据(数据大于窗口大小),小于则全部发送了,窗口后的不允许发送. ...