文章标题

来源：互联网发布：yy摇骰子软件编辑：程序博客网时间：2024/06/03 20:15

圣杯布局

效果：

输入图片说明

html

<body><div class="container">    <div class="center">center</div>    <div class="left">left</div>    <div class="right">right</div></div></body>

css

<style type="text/css">        body{            margin:0;        }        .container{            padding:0 100px;        }        .center{            width:100%;            background-color:pink;            float:left;        }        .left,.right{            width:100px;            background-color:blue;            float:left;            position:relative;top:0;        }        .left{            margin-left:-100%;            left:-100px;        }        .right{            margin-left:-100px;            right:-100px;        }</style>

圣杯布局原理：

center，left，right均设置浮动（center在html中的位置必须在left和right的上面），由于center的width=100%，则必须给left，right设置负margin-left，才能使它们和center并排，margin-left的值分别为：-100%，-（right的宽度）；

container设置padding-left和padding-right，为left，right留出位置；

由于container是它们的父元素，则设置了padding-left，padding-right对left，right元素同样作用，左右两边的空白依旧是空白，则需要给left，right设置相对定位，position：relative；其值分别为：left：-（left的宽度）；right：-（right的宽度）；

双飞翼布局

效果：

输入图片说明

html

<body><div class="container">    <div class="center">        <div class="center_main">center</div>    </div>    <div class="left">left</div>    <div class="right">right</div></div></body>

css

<style type="text/css">        body{            margin:0 auto;        }        .center{            width:100%;            float:left;        }        .center_main{            margin:0 100px;            background-color:pink;        }        .left,.right{            width:100px;            background-color:blue;            float:left;        }        .left{            margin-left:-100%;        }        .right{            margin-left:-100px;        }    </style>

双飞翼布局原理：

center，left，right均设置float：left；由于center的宽度为100%，left，right须设置负margin-left才可与center并排，margin-left的值分别为：-100%，-（right的宽度）；

center宽度为100%，为了给left，right留出位置，则在center下建立一个子元素center_main，并设置margin：0 right的宽度 0 left的宽度；

圣杯布局和双飞翼布局的实现思路差异：

相同点：

圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同点：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position:relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

阅读全文

0 0