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) 宽度固定,中 ...
随机推荐
- Neo4j的查询语法笔记(二)
cypher是neo4j官网提供的声明式查询语言,非常强大,用它可以完成任意的图谱里面的查询过滤,我们知识图谱的一期项目 基本开发完毕,后面会陆续总结学习一下neo4j相关的知识.今天接着上篇文章来看 ...
- Django - Xadmin (五) POP
Django - Xadmin (五) POP 功能及逻辑描述 pop 功能:在添加数据时,对于需要选择的多对多字段,在其 input 框边加上一个按钮,点击该按钮可以实现跳转到添加该字段数据的页面: ...
- IMAP协议学习笔记(一)
IMAP IMAP(Internet Mail Access Protocol,Internet邮件访问协议)以前称作交互邮件访问协议(Interactive Mail Access Protocol ...
- mysql中explain输出列之id的用法详解
参考mysql5.7 en manual,对列id的解释: The SELECT identifier. This is the sequential number of the SELECT wit ...
- C# 错误配置页
在web.config文件中 <system.web> <customErrors mode="On" defaultRedirect="报错时跳到指定 ...
- 初学Java 二维数组找出最近的两个点
import java.util.Scanner; public class FindNearestPoints { public static void main(String[] args) { ...
- cf2c(模拟退火 步长控制
https://www.luogu.org/problem/CF2C 题意:在平面上有三个没有公共部分的圆,求平面上一点使得到三个圆的切线的夹角相等.(若没答案满足条件,则不打印 思路:可用模拟退火算 ...
- Jmeter接口测试---加解密
1.加解密的jar包放到jmeter的lib/ext目录下. 项目打jar包参考https://www.cnblogs.com/fulucky/p/9436229.html 2.在测试计划---> ...
- 【容器化】容器技术实践.pdf_视频学习笔记
容器运行时 docker rkt gvisor containerd 容器编排系统:kubernetes (简称k8s)
- django之创建子应用
一:子应用 Django的视图编写是放在子应用中的.类似于flask中的视图. 二:创建子应用 例如:在刚才的dj_study项目中,创建一个名字为user的子应用(目录):注意是第一级的dj_stu ...