几种经典布局

圣杯布局其实和双飞翼布局是一回事。

它们实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应，差别在于其实现的思想。

本质都是利用float后的margin-left负值，形成布局。

1.圣杯布局

html:

<div id="container">
    <div id="main" class="col">
    #main
    div>
    <div id="left" class="col">
    #left
    div>
    <div id="right" class="col">
    #right
    div>
div>

css:

.col {position: relative;float: left;}

#container {padding: 0 190px 0 190px;}

#main {width: 100%;height: 400px;background-color: #ccc;}

#left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}

#right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}

 

2.双飞翼布局

<div id="container">
    <div id="main" class="col">
        <div id="main-wrap">
            #main
        div>
    div>
    <div id="left" class="col">
    #left
    div>
    <div id="right" class="col">
    #right
    div>
div>

因为装main内容的div宽度是适应变化的，因此不能给它加上width:100%,所以考虑给main多嵌套了一层,使得可以在这层用width:100%,经过margin-left的移动后，不再需要position:relative+left定位的帮助

 

3.三列等高布局

 

实现了无论其中一列内容多高，其余2列都会跟着变高。
HTML:

<div id="wrap">
        <div id="left">
            left
        div>
        <div id="center">
            center<br />
            center<br />
            center<br />
            center<br />
            center<br />
        div>
        <div id="right">
            right
        div>        
div>

核心css代码：

#wrap
{
    overflow: hidden;
    width: 1000px;
    margin: 0 auto;
}
#left, #center, #right
{
    margin-bottom: -10000px;
    padding-bottom: 10000px;
}

padding-bottom把每个盒子顶高，然后用负的margin-bottom将其收回来，对于最高的那列这个就刚好抵消了，毫无意义，但是对于较矮的那两列，父元素的可见区还是漏了一些padding出来，漏出来的padding就是它们与最高列之间的高度差了。

所以说这里设置的几列之间最大的高度差不能超过10000px，当然我们可以修改css来增大它。

 

转载于:https://www.cnblogs.com/amiezhang/p/8277095.html