圣杯布局与双飞翼布局

圣杯布局

• HTML

    

    #main
    
    

    #left
    
    

    #right
    

• 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;}

• 注意点

1 通过margin-left为负值,将left和right部分顶上去,通过相对定位.

双飞翼布局

• HTML

body {min-width: 550px;}
.col {float: left;}

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

#main-wrap {margin: 0 190px 0 190px;}

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

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

• css

    

        

            #main
        
    
    

    #left
    
    

    #right
    

• 注意点

相同点:双飞翼布局也是利用margin-left把left和right顶上去;
不同点:双飞翼是在main里加一个子元素,利用margin或者padding把里面的东西定位