css实现三列布局,左右固定值,中间自适应。
2016-01-29 14:06
1066 查看
这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白。
那么它呈现在页面上的样子则是这样的
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>三列布局,左右固定值,中间自适应</title> <style type="text/css"> .container{position: relative;} .left{position:absolute;left:0;top:0;width: 200px;height:500px;background-color: #f34;} .right{position: absolute;right: 0;top:0;width: 300px;height:500px;background-color: #fcc;} .middle{margin:0 300px 0 200px;height:500px;background-color: #ccc;} </style> </head> <body> <div class="container"> <div class="left"></div> <div class="middle"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="right"></div> </div> </body> </html>
那么它呈现在页面上的样子则是这样的
相关文章推荐
- css基础
- IOS自定义系统导航栏:导航栏背景色、状态栏样式以及是否隐藏、拦截系统导航栏的返回点击事件
- 使用css实现并列div高度随动
- 使用CSS实现图片分割效果的简单方法介绍
- CSS背景属性Background详解
- 【CSS】CSS概述
- CSS之column语法
- CSS 属性选择器详解
- CSS 参考手册
- CSS那些事儿-阅读随笔3(清除浮动)
- 提高CSS文件可维护性的五种方法
- iPhone6的CSS3媒体查询
- CSS3动画-表盘
- 所有设备的CSS像素
- css属性第二版
- 转载:css元素隐藏原理及display:none和visibility:hidden
- Css3绘制圆形
- 转载:你所不知的 CSS ::before 和 ::after 伪元素用法
- css3 滚动条出现 页面不跳动
- CSS兼容