首页 > Web开发 > 详细

css的圣杯布局

时间:2017-05-28 00:18:57      阅读:368      评论:0      收藏:0      [点我收藏+]

圣杯布局和双飞翼布局实现的效果是一样的。

代码解析:

1.四个section,container,main,left,right。其中那个container为父容器。

2.main,left,right均左浮动。

3.main的宽度为100%。

4.设置left的margin:-100%。

5.设置rightd margin:-200px;

6.设置父容器的内边距padding:0px 200px 0px 200px。

7.设置left的positon:relative;left:-200px.

8.设置right的position:relative:right;right:-200px;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            min-width: 700px;
        }
        
        #container {
            padding: 0px 200px 0px 200px;
        }
        
        #main {
            height: 200px;
            width: 100%;
            float: left;
            background-color: rebeccapurple;
            word-break: break-all;
        }
        
        #left {
            height: 200px;
            width: 200px;
            float: left;
            background-color: gold;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        
        #right {
            height: 200px;
            width: 200px;
            float: left;
            background-color: firebrick;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
    </style>
</head>

<body>
    <section id="container">
        <section id="main">
            gfdgdfg gdfgfdg gfdgdfg gdfgfdggfdgdfg gdfgfdggfdgdfg gdfgfdg
        </section>
        <section id="left"></section>
        <section id="right"></section>
    </section>
</body>

</html>

  

css的圣杯布局

原文:http://www.cnblogs.com/xiaoai123/p/6914750.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!