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圣杯布局的更多相关文章

  1. css圣杯布局的实现方式

    css圣杯布局思路: 外面一个大div,里面三个小div(都是浮动).实现左右两栏宽度固定,中间宽度自适应.中间栏优先渲染. 资源网站大全 https://55wd.com 设计导航https://w ...

  2. CSS 圣杯布局升级版---多个固定宽度一个自适应宽度

    1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"> <div class="mai ...

  3. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

  4. CSS | 圣杯布局、双飞翼布局 | 自适应三栏布局

    圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式.两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局 虽然两者的实现方法略有差异,不过都遵循了以下要点: 1.两侧宽度固定 ...

  5. CSS 圣杯布局

    前端的两个经典布局想必大家都有多了解--圣杯布局和双飞翼布局,因为它既能体现你懂HTML结构又能体现出你对DIV+CSS布局的掌握. 事实上,圣杯布局其实和双飞翼布局是一回事.它们实现的都是三栏布局, ...

  6. css——圣杯布局

    圣杯布局要求 header和footer各自占领屏幕所有宽度,高度固定 中间dontainer部分为左中右三栏式布局 三栏布局中左右两侧宽度固定,中间部分自动填充 实现方式 1.浮动 先定义heade ...

  7. css圣杯布局、等高布局

    所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...

  8. CSS圣杯布局、双飞翼布局详解

    三栏布局中,经典中的经典应该就是圣杯布局.双飞翼布局没跑了.双飞翼布局和圣杯布局其实是一样的,只不过在写法上有些不同,其布局都是左右固定宽度,中间宽度自适应. 先熟悉一下圣杯布局.双飞翼布局中的特点: ...

  9. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

随机推荐

  1. Spark Streaming Transformations

    map(func):对DStream中的所有的元素进行func转换生成新的DStream flatMap(func):和map方法类似,先对DStream中的元素进行func运算,然后压平,就是说,如 ...

  2. ORACLE之字符集修改(10g)

    当从oracle服务器将数据导出成dmp文件后,再导入到本地的oracle数据库时,出现: IMP-00019: 由于 ORACLE 错误 12899 而拒绝行 IMP-00003: 遇到 ORACL ...

  3. Storm简介——实时流式计算介绍

    概念 实时流式计算: 大数据环境下,流式数据将作为一种新型的数据类型,这种数据具有连续性.无限性和瞬时性.是实时数据处理所面向的数据类型,对这种流式数据的实时计算就是实时流式计算. 特征 实时流式计算 ...

  4. JVM 垃圾回收(GC)机制

    目录 一.背景 二. 哪些内存需要回收? 1.引用计数算法 2 .可达性分析算法 三. 四种引用状态 1.强引用 2.软引用 3.弱引用 4.虚引用 对象死亡(被回收)前的最后一次挣扎 方法区如何判断 ...

  5. python面向对象的三大特征--多态

    #什么是多态:由不同的类实例化得到的对象,调用同一个方法,执行的逻辑不同 #多态体现在由一个类实例化出多个对象,这些对象执行相同的方法时,执行的过程和结果不一样--不同的对象调用相同的方法 #多态的概 ...

  6. Java反编译工具Luyten-0.5.3

    Luyten是一款很强大的反编译工具包,是一款github的开源工具,软件功能非常强大,界面简洁明晰.操作方便快捷,设计得很人性化. 工具软件下载路径:https://github.com/death ...

  7. python tkinter画圆

    x0=150    #圆心横坐标 y0=100    #圆心纵坐标 canvas.create_oval(x0-10,y0-10,x0+10,y0+10)    #圆外矩形左上角与右下角坐标 canv ...

  8. sys模块 json pickle模块

    # sys模块# import sys# sys.path# sys.argv# sys.exit() # 脚本退出# print('[%s]'%('#'*1))# print('[%s]'%('#' ...

  9. go入门收集(转)

    go mod 使用 原文地址: https://juejin.im/post/5c8e503a6fb9a070d878184a  

  10. 父工程 pom版本

    <!-- 集中定义依赖版本号 --> <properties> <junit.version>4.12</junit.version> <spri ...