您的位置：首页 > Web前端

从网上学习的网页宽度自适应布局方法

2015-08-18 14:52 375 查看

原文链接： http://www.zhangxinxu.com/wordpress/2009/11/我所熟知的三种三栏网页宽度自适应布局方法，自己做了相应的练习。
学习了这三种不同的方法：绝对定位实现法，margin负值法，以及浮动定位法。代码如下：
1.绝对定位实现法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位法实现三栏布局</title>
<style>
html, body{ margin:0; height: 100%;}
#left, #right{width: 200px; height: 100%; position: absolute; top:0;}
#left{ left:0;  background: #FF1B79;}
#right{ right:0; background:#FF1B79;}
/*左右设为absolute后，已脱离文档流。 main还在文档流当中。*/
#main{ background: #02A6E0; height: 100%; margin: 0 210px;}
</style>
</head>
<body>
<div id="left"></div>
<div id="main"></div>
<div id="right"></div>

</body>
</html>

2. margin负值法（参考文章中有个错误，content不要跟main一起设置margin）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin负值法实现三栏布局</title>
<style>
html, body{ margin: 0; height: 100%;}
.main{ width:100%; height: 100%; float: left; }
.content{ margin: 0 210px; height: 100%;  background: #FF1B79;}
.left, .right{ width: 200px; height: 100%; float: left; background: #FFBB00;}
.left{ margin-left: -100%;}
.right{ margin-left: -200px;}
</style>
</head>
<body>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

3.浮动定位法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自身浮动法</title>
<style>
html, body,p { margin:0; padding: 0; height: 100%;}
.main{ height: 100%; margin: 0 210px; background: #02A6E0; }
.left{ float: left; width: 200px; height: 100%; background: #FF1B79; }
.right{ float: right; width: 200px; height: 100%; background: #FF1B79;}

</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main">
<p>这里三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意</p>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端布局布局

相关文章推荐

新的分享

章节导航