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

最新推荐文章于 2022-03-08 18:38:58 发布

zbhzbn

最新推荐文章于 2022-03-08 18:38:58 发布

阅读量506

点赞数

分类专栏：网页布局文章标签：前端布局布局

本文链接：https://blog.csdn.net/zbhzbn/article/details/47751935

版权

网页布局专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原文链接： 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>