div+css布局自适应小结

一、两栏布局（左定宽，右自动）
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（两侧定宽，中间自适应）

.wrap_content{
margin-left: 220px;
margin-right: 220px;
background-color: yellow;
}
.wrap_right{
width: 200px;
position: absolute;
right: 0;
background-color: green;
}

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>

div+css布局自适应小结的更多相关文章

DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西得小心使用本来有一很好的关于CSS+DIV的论坛不过现在关门了甚是可 ...
DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
DIV+CSS布局-固定页面开度布局
DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
(转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了一直饱受其恩泽尤为感激一直想奉献些什么但是苦于水平苦于奔波今天静下心来为大家奉献下自己的div+css 经验 ,以下观点只代表深海个人立场希望为初学者提供一条" ...
(转)一小时搞定DIV+CSS布局-固定页面开度布局
本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...
div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...
DIV+CSS布局重新学习之float/margin/padding
之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...
div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）
站酷几年了一直饱受其恩泽尤为感激一直想奉献些什么但是苦于水平苦于奔波今天静下心来为大家奉献下自己的div+css 经验 ,以下观点只代表深海个人立场希望为初学者提供一条" ...

随机推荐

python编写简单的html登陆页面（1）
1 html 打开调式效果如下 2 用python后台编写 # coding:utf-8# 从同一个位置导入多个工具,# 这些工具之间可以用逗号隔开,同时导入# render_template渲染 ...
Period UVA - 1328_结论题
Code: #include<cstdio> #include<cstring> using namespace std; const int maxn=1000000+5; ...
call和apply的使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
react 简单在页面中输出一段文字
之前用脚手架创建了一个react项目,将react自带的src文件夹删除后创建一个空的src文件夹在src文件夹中创建一个index.jsx文件作为JS入口文件并创建一个hello组件现在我们进入 ...
关于struts值栈的总结，前端页面如何使用标签取得值栈中的数据
用户提交一次请求的执行过程总结: struts值栈中两个内容一个是栈一个是map 值栈(数据中心)的范围是一个请求它代替了request作用域 struts自定义标签有一个特点比如遍历集合 ...
WEB服务器（Tomcat）
在小型的应用系统或有特殊需要的系统中,也可以使用一个免费的Web服务器: Tomcat,该服务器支持全部的JSP以及Servlet 规范, 下载 Tom 查看计算机上被占用端口号的情况: 使用Fpor ...
MySQL DROP TABLE操作以及 DROP 大表时的注意事项
语法: 删表 DROP TABLE Syntax DROP [TEMPORARY] TABLE [IF EXISTS] tbl_name [, tbl_name] ... [RESTRICT | CA ...
OJ刷题---手机尾号评分
题目要求: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dis ...
有关文档碎片（document fragment）的使用方法
通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意味着将DOM的改变分批处 ...
Atom介绍和安装步骤
Atom是全然基于web技术开发而成的一款编辑器,其底层架构依赖于chromium,google chrome浏览器也是基于此.编辑器的每一个窗体都是本地渲染的web页面,而且其风格与时下流行的sub ...

div+css布局自适应小结

div+css布局自适应小结的更多相关文章

随机推荐

热门专题