聖盃佈局與雙飛翼佈局

要實現以下圖所示的佈局，可利用聖盃佈局或雙飛翼佈局(紫色部分可伸縮)

 

聖盃佈局

 

 /*css代碼*/
        #head{
            height: 200px;
            background: red;
        }
        #foot{
            height:200px;
            background: pink;
        }
        #content{
            padding: 0px 200px 0px 150px;
            overflow: hidden;
        }
        #main{
            width:100%;
            background: purple;
            float: left;
        }
        #left{
            width: 150px;
            background: yellow;
            float: left;
            position: relative;
            margin-left: -100%;
            left: -150px;
        }
        #right{
            width: 200px;
            background: green;
            float: left;
            margin-right: -200px;
        }
        #left,#right,#main{
            padding-bottom: 10000px;
            margin-bottom:-10000px;
        }


<!--html代碼-->
   <div id="head">head</div>
   <div id="content">
       <div id="main">
           <p>內容內容內容內容內容內容內容</p>
           <p>內容內容內容內容內容內容內容</p>
           <p>內容內容內容內容內容內容內容</p>
           <p>內容內容內容內容內容內容內容</p>
       </div>
       <div id="left">
           <ul>
               <li>左菜單一</li>
               <li>左菜單二</li>
               <li>左菜單三</li>
           </ul>
       </div>
       <div id="right">
           <ul>
               <li>右菜單一</li>
               <li>右菜單二</li>
               <li>右菜單三</li>
           </ul>
       </div>
   </div>
   <div id="foot">foot</div>

 

佈局的關鍵在id爲content,main,left,right的四個div，在聖盃佈局中，content的左右內邊距分別爲left和right的寬度，main,left,left均向左浮動，利用margin把left和right分別放到main左右兩邊的空白處。

 

 

 

 

雙飛翼佈局

 

 /*css代碼*/
        #head{
            height: 200px;
            background: red;
        }
        #foot{
            height:200px;
            background: pink;
        }
        #content{
            overflow: hidden;
        }
        #text{
            margin-right: 200px;
            margin-left: 150px;
        }
        #main{
            width:100%;
            background: purple;
            float: left;
        }
        #left{
            width: 150px;
            background: yellow;
            float: left;
            position: relative;
            margin-left: -100%;
        }
        #right{
            width: 200px;
            background: green;
            float: left;
            margin-left: -200px;
        }
        #left,#right,#main{
            padding-bottom: 10000px;
            margin-bottom:-10000px;
        }



<!--HTML代碼-->
<div id="head">head</div>
<div id="content">
    <div id="main">
        <div id="text">
            <p>內容內容內容內容內容內容內容</p>
            <p>內容內容內容內容內容內容內容</p>
            <p>內容內容內容內容內容內容內容</p>
            <p>內容內容內容內容內容內容內容</p>
        </div>
    </div>
    <div id="left">
        <ul>
            <li>左菜單一</li>
            <li>左菜單二</li>
            <li>左菜單三</li>
        </ul>
    </div>
    <div id="right">
        <ul>
            <li>右菜單一</li>
            <li>右菜單二</li>
            <li>右菜單三</li>
        </ul>
    </div>
</div>
<div id="foot">foot</div>

 

雙飛翼是由聖盃佈局演變而來的，對比兩種佈局的html可知，在雙飛翼中，main中的內容外面還嵌套了一個id爲text的div，這就決定了css的不一樣。雙飛翼佈局中，content並無設置左右內邊距，而設置了text的左右外邊距，左右邊距分別爲left和right的寬度。