css布局系列——双飞翼布局

最新推荐文章于 2024-03-01 14:45:20 发布

hahaahahahha

最新推荐文章于 2024-03-01 14:45:20 发布

阅读量134

点赞数

原文链接：http://www.cnblogs.com/gongOnTheWay/p/4825237.html

版权

双飞翼布局是一种三列布局，两边定宽，

STEP1:DOM struction,the struction and the holy grail mode are the same except the center column wraps a new element

<div id="header"></div>
     <div id="container">
         <div id="center" class="column">
             <div id="maincenter"></div>
        </div>
        <div id="left" class="column"></div>
        <div id="right" class="column"></div>
     </div>
<div id="footer"></div>

STEP2:We improve the css on the basis of the holy grail css

remove :

1.relative position

2.padding of container

add:

marging of wrapped element

　　 body {
      min-width: 550px;  /* 2x LC width + RC width */
    }
    #container .column {
      float: left;
    }
    #container {
    }
    #center {
      background: #D6D6D6;
      width: 100%;
    }
    #left {
      background: #77BBDD;
      width: 200px;
      margin-left: -100%  ;
    }
    #right {
      width: 150px;
      background: #FF6633;
      margin-left: -150px;
    }
    #maincenter{
      margin-left: 200px;
      margin-right: 150px;
    }