CSS布局——三栏布局

说到三栏布局，很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式。于是，我在网上搜了一些相关资料，阅读并跟着代码敲了一遍，发现在处理三栏布局上，他们采用的都是两边栏固定，中间栏自适应的策略。在处理页脚上，采用的是清除浮动方式。在处理边栏的方式上也基本一致，唯一的不同是html结构以及处理中间栏的方式不一样。现在试着用自己的语言来描述下这两个布局。

一、三栏布局 ——Marchew

这个三栏布局方式是在csdn看别人的圣杯布局时推荐的链接里的，据说是圣杯布局的原始形态，由外国人Marchew写的。因此，该布局在处理三栏布局时跟圣杯布局如出一辙，不过代码比圣杯布局简单些，而且在处理IE6兼容上也做得很好。

CSS代码：

    /*** The Essential Code ***/

    body {
        min-width: 550px;         /* 2 x LC width + RC width */
    }

    #container {
        padding-left: 200px;      /* LC width */
        padding-right: 150px;     /* RC width */
    }
    
    #container .column {
        position: relative;
        float: left;
    }
    
    #center {
        width: 100%;
    }
    
    #left {
        width: 200px;             /* LC width */
        right: 200px;             /* LC width */
        margin-left: -100%;
    }
    
    #right {
        width: 150px;             /* RC width */
        margin-right: -100%;
    }
    
    #footer {
        clear: both;
    }
    
    /*** IE6 Fix ***/
    * html #left {
        left: 150px;              /* RC width */
    }

    /*** Just for Looks ***/

    body {
        margin: 0;
        padding: 0;
        background: #FFF;
    }

    #header, #footer {
        font-size: large;
        text-align: center;
        padding: 0.3em 0;
        background: #999;
    }

    #left {
        background: #66F;
    }

    #center {
        background: #DDD;
    }

    #right {
        background: #F66;
    }

    #container .column {
        padding-top: 1em;
        text-align: justify;
    }

html代码：

<div id="header">This is the header.</div>

<div id="container">

    <div id="center" class="column">
        <h1>This is the main content.</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="left" class="column">
        <h2>This is the left sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

    <div id="right" class="column">
        <h2>This is the right sidebar.</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p>
    </div>

</div>

<div id="footer">This is the footer.</div>

二、三栏布局——圣杯布局

圣杯布局在处理中间块自适应上采用的策略主要是，三栏采用相对定位,左右栏填补两边空白的方式进行布局。在内容上，采用的是overflow:hidden，若有内容溢出，则直接隐藏。

CSS代码：

/*圣杯布局*/

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 420px;
}

.header,
.footer {
    border: 1px solid #333;
    background: #aaa;
    text-align: center;
}

.left,
.main,
.right {
    position: relative;
    min-height: 130px;
    float: left;
}

.container {
    border: 2px solid yellow;
    padding: 0 220px 0 200px;
    overflow: hidden;
}

.left {
    margin-left: -100%;
    width: 200px;
    background: red;
    left: -200px;
}

.right {
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background: green;
}

.main {
    background: blue;
    width: 100%;
}

.footer {
    clear: both;
}

html代码：

<div class="header">header</div>
<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>

三、三栏布局——双飞翼布局

双飞翼布局在处理中间栏自适应上，采用过的策略是在主栏容器里再放一个内容容器，通过设置内容容器的margin进行自适应的调节。

CSS代码：

* {
    margin: 0;
    padding: 0;
}

body {
    min-width: 420px;
}

.header,
.footer {
    border: 1px solid #333;
    background: #aaa;
    text-align: center;
}

.left,
.main,
.right {
    float: left;
    min-height: 130px;
}

.container {
    border: 2px solid yellow;
    overflow: hidden;
}

.left {
    margin-left: -100%;
    width: 200px;
    background: red;
}

.right {
    margin-left: -220px;
    width: 220px;
    background: green;
}

.main {
    width: 100%;
    background: blue;
}

.content {
    margin: 0 220px 0 200px;
}

.footer {
    clear: both;
}

html代码：

<div class="header">header</div>
<div class="container">
    <div class="main">
        <div class="content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="footer">footer</div>

转载于:https://www.cnblogs.com/Canace22/p/7353918.html