Div + CSS 创建自适应宽度布局(液态布局)
来源:互联网 发布:护理网络教育本科 编辑:程序博客网 时间:2024/05/17 03:41
长话短说,用 DIV + CSS 做液态布局(宽度自适应),具体用到“负值外补丁”的方法 (negative margins)。
下面我们来做一个三栏液态布局(three-column liquid layout)
首先 Body 和 外框 的代码:
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}
#wrap{margin:0 auto;text-align:left;}
三栏的代码分别如下:
/*左边栏,固定宽度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中间栏,自适应宽度*/
.wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*右边栏,固定宽度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中间栏,自适应宽度*/
.wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*右边栏,固定宽度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}
到这里,框架已经完成,以下是完整代码:
HTML代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="Wayhome Wang" />
<meta name="Copyright" content="Copyright (C) 2003-2005 www.Abloxo.com All Rights Reserved." />
<meta name="description" content="Wayhome Wang icon, ui, website, wallpaper, design" />
<title>[示例] div + css 创建自适应宽度布局(液态布局)- Abloxo.com | Oeye.cn</title>
<style type="text/css">
<!--
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}
/*左边栏,固定宽度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中间栏,自适应宽度*/
.wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*右边栏,固定宽度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}
.wrap_inner_l{float:left;background:#00FFFF;margin-right:-200px;width:200px;}
.wrap_inner_m{width:auto;background:#FFFF00;margin:0 0 0 200px;}
-->
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_r">
这是右边部分<br />
这是右边部分<br />
这是右边部分
</div>
<div class="wrap_m">
这是中间部分
<div class="wrap_inner_l">中间的左边</div>
<div class="wrap_inner_m">中间的右边</div>
这是中间部分
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author" content="Wayhome Wang" />
<meta name="Copyright" content="Copyright (C) 2003-2005 www.Abloxo.com All Rights Reserved." />
<meta name="description" content="Wayhome Wang icon, ui, website, wallpaper, design" />
<title>[示例] div + css 创建自适应宽度布局(液态布局)- Abloxo.com | Oeye.cn</title>
<style type="text/css">
<!--
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}
/*左边栏,固定宽度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中间栏,自适应宽度*/
.wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*右边栏,固定宽度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}
.wrap_inner_l{float:left;background:#00FFFF;margin-right:-200px;width:200px;}
.wrap_inner_m{width:auto;background:#FFFF00;margin:0 0 0 200px;}
-->
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_r">
这是右边部分<br />
这是右边部分<br />
这是右边部分
</div>
<div class="wrap_m">
这是中间部分
<div class="wrap_inner_l">中间的左边</div>
<div class="wrap_inner_m">中间的右边</div>
这是中间部分
</div>
</div>
</body>
</html>
- Div + CSS 创建自适应宽度布局(液态布局)
- div + css宽度自适应(液态布局)
- CSS布局-DIV宽度自适应
- DIV 自适应宽度 布局
- CSS布局-宽度自适应
- css布局 宽度自适应
- Div+CSS创建固定宽度布局
- CSS布局之-宽度自适应
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- CSS DIV自适应高度布局
- DIV+CSS布局两列右列宽度自适应布局的不同实现方法
- 自适应布局---自适应宽度
- css实现左右布局,左侧div固定不变,右侧div宽度自适应
- css三列布局,中间div固定,两侧div宽度自适应
- CSS 移动端布局1(自适应屏幕宽度)
- css自适应布局之无宽度原则
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度
- css三列布局,左边两个div固定,最右边宽度自适应
- Oracle恢复误操作drop删除的表
- 使用smartUpload上传附件
- Linux Command 总结
- 学习oracle约束
- HDU 4371 Alice and Bob
- Div + CSS 创建自适应宽度布局(液态布局)
- jquery+jsp+servlet做$.ajax交互时出现中文乱码(字符集问题)的解决方案
- MySql存储过程—7、游标(Cursor)
- WORD模板的设定及在行政审批的应用(一)
- 跨平台的编译工具
- 面向对象的一些术语精解
- MacVim 中文乱码问题解决
- C语言宏定义精析
- 动态范围