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. sqoop简单使用

    一,通过sqoop将MySQL里面的数据加载到HDFS 先查看有哪些数据库 查看表person sqoop list-databases --connect jdbc:mysql://ly-p2p4: ...

  2. 文献管理工具mendeley登录问题

    mendeley是一个文献管理工具,但是有一个让人诟病的地方是第一次登录,容易出现问题: 1.点击登录按钮后,报出红色警告 这个百度的问题中,经常提到的是这个,去点击红色错误的链接,通常应该是需要fa ...

  3. 基于cdn方式的vue+element-ui的单页面架构

    一.下载vue2.x,下载element-ui.js以及css 二.html文件 <!DOCTYPE html> <html> <head> <meta ch ...

  4. keepalived的配置文件

    ! Configuration File for keepalived global_defs { notification_email { # acassen@firewall.loc # fail ...

  5. fiddler 手机抓包,CS端抓包 使用记录

    1.允许远程连接 2.忽略https证书错误 3.设置代理 4.重启fiddle 5.PC客户端抓包分工具FIddler+Proxifer https://blog.csdn.net/sunbo_cs ...

  6. BZOJ-1907 树的路径覆盖 贪心

    题意:给一个n个点的树,求树的最小路径覆盖.(这个最小路径覆盖不能有重点) 解法:往图论方向想很久,想得太复杂了,其实直接贪心.这个大佬题解写得很好: https://blog.csdn.net/bl ...

  7. LA 3263 That Nice Euler Circuit(欧拉定理)

    That Nice Euler Circuit Little Joey invented a scrabble machine that he called Euler, after the grea ...

  8. [php 拓展开发] hello world

    1.下载php源码包 2.在php-7.0.9/ext 下执行 ./ext_skel --extname=hello  3. 4.拓展代码 5. 6.编译 多了分号,出错. 重新编译成功,但是生成的文 ...

  9. phpstorm 调试时浏览器显示The requested resource / was not found on this server

    1.进入thinkphp项目的public 目录运行以下命令即可 root@jiang:/var/www/tp5# php -S localhost:8080 router.php PHP 7.2.2 ...

  10. Kettle日志级别

    Kettle的日志级别LogLevel分为以下几个: Nothing 没有日志 不显示任何输出 Error 错误日志 仅仅显示错误信息 Minimal 最小日志 使用最小的日志 Basic 基本日志 ...