div+css布局自适应小结
2015-09-28 14:14
841 查看
一、两栏布局（左定宽，右自动）
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
2.position + margin
即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
position: relative;
}
.wrap_left{
position: absolute;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
3.float + 负margin
即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
固定宽度元素设置margin-left属性为负值：-100%；
除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.wrap .wrap_right{
margin-left: 220px;
background-color: green;
}
.wrap_left{
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_right">
我是右栏
</div>
</div>
<div class="wrap_left">
我是左栏
</div>
</body>
</html>
注：使用的float属性，必要时清除一下浮动。
4.用table布局实现<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
<tr>
<td width="200" bgcolor="red"></td>
<td bgcolor="green"></td>
</tr>
</table>
</body>
</html>
注：使用表格时，一定要设置高度才可以
5.触发BFC实现
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么，大家可以看看这篇，
实现方法，即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</body>
</html>
6.flex伸缩盒方法
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
flex-grow:1;
-webkit-flex-grow:1;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
二、三栏布局
掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现
1. float + margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
float: left;
background-color: red;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: right;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
2. position + margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
position: absolute;
background-color: red;
left: 0;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
position: absolute;
right: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
3.float + 负margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;;
width: 100%;
}
.wrap_left{
width: 200px;
float: left;
margin-left: -100%;
background-color: red;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: left;
margin-left: -200px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_content">
我是中间栏
</div>
</div>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</body>
</html>
4.table实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
<tr>
<td width="200" bgcolor="red"></td>
<td bgcolor="yellow"></td>
<td width="200" bgcolor="green"></td>
</tr>
</table>
</body>
</html>
5.BFC方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
float: right;
width: 200px;
background-color: green;
}
.wrap_content{
overflow: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
注：HTML中先写定宽元素，再写自适应宽度元素。
6.flex伸缩盒
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
width: 200px;
background-color: green;
}
.wrap_content{
flex-grow:1;
-webkit-flex-grow:1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_content">
我是中间栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
1. float + margin
即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
2.position + margin
即在父标签设置position属性为relative；子标签中定宽元素设置position属性为absolute；自适应元素设置margin属性，margin-left>=定宽元素宽度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
margin: 10px;
position: relative;
}
.wrap_left{
position: absolute;
width: 200px;
background-color: red;
}
.wrap_right{
margin-left: 220px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
3.float + 负margin
即给自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
固定宽度元素设置margin-left属性为负值：-100%；
除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;
width: 100%;
}
.wrap .wrap_right{
margin-left: 220px;
background-color: green;
}
.wrap_left{
float: left;
width: 200px;
margin-left: -100%;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_right">
我是右栏
</div>
</div>
<div class="wrap_left">
我是左栏
</div>
</body>
</html>
注：使用的float属性，必要时清除一下浮动。
4.用table布局实现<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
<tr>
<td width="200" bgcolor="red"></td>
<td bgcolor="green"></td>
</tr>
</table>
</body>
</html>
注：使用表格时，一定要设置高度才可以
5.触发BFC实现
关于BFC是什么、怎么触发BFC以及BFC可以用来做什么，大家可以看看这篇，
实现方法，即为定宽元素设置float:left;自适应宽度元素设置可以触发BFC的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
overflow: hidden;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</body>
</html>
6.flex伸缩盒方法
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两栏栏布局-左定宽，右自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
flex-grow:1;
-webkit-flex-grow:1;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
二、三栏布局
掌握了上面的方法，我们会发现制作一个三栏布局也是非常容易的。
下面我们在上面栗子的基础上，看看实现一个两侧定宽，中间自适应的三栏布局如何实现
1. float + margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
float: left;
background-color: red;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: right;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
2. position + margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
width: 200px;
position: absolute;
background-color: red;
left: 0;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
position: absolute;
right: 0;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
3.float + 负margin（两侧定宽，中间自适应）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自适应</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
float: left;;
width: 100%;
}
.wrap_left{
width: 200px;
float: left;
margin-left: -100%;
background-color: red;
}
.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
float: left;
margin-left: -200px;
background-color: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_content">
我是中间栏
</div>
</div>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
</body>
</html>
4.table实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,table{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="1" height="300">
<tr>
<td width="200" bgcolor="red"></td>
<td bgcolor="yellow"></td>
<td width="200" bgcolor="green"></td>
</tr>
</table>
</body>
</html>
5.BFC方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap_left{
float: left;
width: 200px;
background-color: red;
}
.wrap_right{
float: right;
width: 200px;
background-color: green;
}
.wrap_content{
overflow: hidden;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_right">
我是右栏
</div>
<div class="wrap_content">
我是中间栏
</div>
</body>
</html>
注：HTML中先写定宽元素，再写自适应宽度元素。
6.flex伸缩盒
即父标签设置display:flex属性，自适应元素设置flex-grow:1;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局-两侧定宽，中间自动</title>
<style type="text/css">
html,body,div{
margin: 0;
padding: 0;
}
.wrap{
display: flex;
display: -webkit-flex;
}
.wrap_left{
width: 200px;
background-color: red;
}
.wrap_right{
width: 200px;
background-color: green;
}
.wrap_content{
flex-grow:1;
-webkit-flex-grow:1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="wrap_left">
我是左栏
</div>
<div class="wrap_content">
我是中间栏
</div>
<div class="wrap_right">
我是右栏
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 引入CSS
- CSS图像替换技术的几种方案介绍
- CSS的半透明处理
- 浅谈CSS中overflow清除浮动的用法
- CSS的一些圆角图形实例分享
- js实现分页列表添加样式
- 判断手机旋转代码 屏幕旋转的事件和样式
- CSS的position属性详解
- CSS的定位原理
- CSS3绘制圆角矩形的简单示例
- CSS实现菜单背景自适应宽度的方法
- CSS3 Filter详解（改变模糊度 亮度 透明度等方法）
- css
- 改写控件之《仿iOS滑动枷锁样式的登录》
- 改写控件之《仿iOS滑动枷锁样式的登录》
- css 中使用 z-index + absolute控制层的堆叠
- 用css写三角
- CSS-3 Transition 的使用
- CSS属性小结之--半透明处理
- Web前端HTML+CSS+JS初级入门视频课程 001