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) 宽度固定,中 ...
随机推荐
- ubantu 安装mongodb数据库
STEP 1: 在终端输入GPK码 $ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334B ...
- (三:NIO系列) Java NIO Channel
出处: Java NIO Channel 1.1. Java NIO Channel的特点 和老的OIO相比,通道和NIO流(非阻塞IO)主要有以下几点区别: (1)OIO流一般来说是单向的(只能读或 ...
- Mysql日期和字符的相互转换
今天从网上查到了一些关于MySQL数据库的日期转换函数的转换的用法,在这里记录一下: mysql日期和字符相互转换 date_format(date,'%Y-%m-%d') ------------- ...
- python实现不同条件下单据体的颜色不一样,比如直接成本分析表中关闭的细目显示为黄色
#引入clr运行库 import clr #添加对cloud插件开发的常用组件的引用 clr.AddReference('Kingdee.BOS') clr.AddReference('Kingdee ...
- SQLServer死锁查询
--查询死锁 select request_session_id spid, OBJECT_NAME(resource_associated_entity_id) tableName from sys ...
- ubuntu移动分区,修改目录挂在点
由于/tmp目录空间有点小,导致安装一个大软件的时候提示/tmp空间不足,最后通过创建新分区,并将新分区挂在到/tmp下,把/tmp空间扩大. 安装gparted 输入如下命令: sudo apt-g ...
- python常用函数 V
vars(object) 返回对象object的属性和属性值的字典对象.不输入参数,就打印当前调用位置的属性和属性值,相当于locals()的功能. 例子:
- centos上部署flask项目之环境配置-MySQL的安装
1.添加mysql 的yum源 wget 'https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm' rpm ...
- poj 3468 : A Simple Problem with Integers 【线段树 区间修改】
题目链接 题目是对一个数组,支持两种操作 操作C:对下标从a到b的每个元素,值增加c: 操作Q:对求下标从a到b的元素值之和. #include<cstdio> #include<c ...
- go入门收集(转)
go mod 使用 原文地址: https://juejin.im/post/5c8e503a6fb9a070d878184a