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) 宽度固定,中 ...
随机推荐
- 简单实现一个textarea自适应高度
textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度. 预览地址:textarea ...
- UVA 12849 Mother’s Jam Puzzle( 高斯消元 )
题目: http://uva.onlinejudge.org/external/128/12849.pdf #include <bits/stdc++.h> using namespace ...
- webpack之给目录起别名
1. 配置文件目录: build>webpack.base.config.js: resolve: { alias: { '@': resolve('src'), //照猫画虎 'styles' ...
- webGL 旋转算法
lon = 0,//y旋转角度 lat = 0, onMouseDownLat = 0, phi = 0, theta = 0; if ( isUserInteracting === false ) ...
- iis8.5部署net项目
服务器上运行提示: iis版本: 使用命令行运行cmd(管理员模式) 输入: %windir%\system32\inetsrv\appcmd unlock config -section:syste ...
- Codeforces Round #424 (Div. 2, rated, based on VK Cup Finals) - B
题目链接:http://codeforces.com/contest/831/problem/B 题意:给第2个26个字母并不重复的字符串(2个字符串对于一个映射),第1个字符串为key集合,第2个字 ...
- poj 2187 Beauty Contest(平面最远点)
Beauty Contest Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 24431 Accepted: 7459 D ...
- scapy - 基于python的数据包操作库
简介 地址:https://github.com/secdev/scapy scapy是一个基于python的交互式数据包操作程序和库. 它能够伪造或者解码多种协议的数据包,通过使用pcap文件对他们 ...
- 【串线篇】spring boot页面模板引擎
如JSP.Velocity.Freemarker.Thymeleaf SpringBoot推荐的Thymeleaf:语法更简单,功能更强大: 一.引入thymeleaf <dependency& ...
- 手工实现Array List和Linked List
Array List样例: /** * 增加泛型 * 自动增加数组容量 * 增加set.get方法:增加数组边界的检查 * 增加remove方法 */package cn.study.lu.four; ...