html中散列布局的实现,中间自适应大小,两边固定宽度
2016-07-11 14:31
696 查看
代码如下:::
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
.left{width: 200px;height: 500px; background: #ccc;position: absolute;left: 0;top: 0;}
.middle{height: 500px; background: #999; margin: 0 310px 0 210px;}
.right{width: 300px; height: 500px; background:#ddc;position: absolute;right: 0;top: 0;}
</style>
</head>
<body>
<div class="left">200px</div>
<div class="middle">本《员工手册》旨在使您较全面的了解公司
的组织架构及行政管理程序、在本公司任职期间应遵守的公司章程
、以及可以享受到的福利。在此基础上,实现员工与公司共赢共存,以
及以公司为桥梁,员工与客户的共赢共存。</div>
<div class="right">300px</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{margin: 0;padding: 0;}
.left{width: 200px;height: 500px; background: #ccc;position: absolute;left: 0;top: 0;}
.middle{height: 500px; background: #999; margin: 0 310px 0 210px;}
.right{width: 300px; height: 500px; background:#ddc;position: absolute;right: 0;top: 0;}
</style>
</head>
<body>
<div class="left">200px</div>
<div class="middle">本《员工手册》旨在使您较全面的了解公司
的组织架构及行政管理程序、在本公司任职期间应遵守的公司章程
、以及可以享受到的福利。在此基础上,实现员工与公司共赢共存,以
及以公司为桥梁,员工与客户的共赢共存。</div>
<div class="right">300px</div>
</body>
</html>
相关文章推荐
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 通过Mootools 1.2来操纵HTML DOM元素
- jQuery Html控件基本操作(日常收集整理)
- WEB标准网页布局中尽量不要使用的HTML标签
- Flash 与 html 的一些实用技巧
- html工作中表格<tbody>标签的使用技巧
- HTML 向 XHTML1.0 兼容性指导
- C#自写的一个HTML解析类(类似XElement语法)
- 没有文件大小限制并免费的PDF到HTML转换工具