css三列布局之雙飛翼pk聖盃

三列布局：兩邊定寬，中間自適應！

看到這個問題，我第一眼想的就是兩邊定寬float左右，中間加一個margin寬度自適應或者直接設一個overflow：hidden觸發bfc機制，這樣也能夠，看上去也沒什麼問題，可是html中div的順序倒是 

<div class = "left"></div>

<div class = "right"></div>

<div class = "main"></div>

（就用class名字來表明它的位置）一般咱們的主體內容是放在main裏面的，可是在html的順序中確是最後加載，由於若是最早加載main，main佔據整行下面的left，right就不會本身浮動上去，因此這樣確定是不完美的！

因此接下來咱們介紹的兩種方式就是完美的實現這種佈局，讓main最早加載，並且完美的解決兼容性問題。

第一種叫作聖盃佈局：

思路是main left right所有float：left，這樣，main就會再也不具備塊級元素的特性main的寬度設置100%同時，此時給left設置一個margin-left：-100%，給right設置一個margin-right：-它自身的寬度，這樣咱們就硬性的把它們放到了一行上，可是實際上此時left和right是覆蓋在了main的兩邊，這樣確定是不行的！由於會遮蓋一些我門想要展現的東西！因此咱們還須要作一些事情。這裏有兩種方法第一種是將main的box-sizing變成border-box，而後直接給main設置padding，padding-left和padding-right分別是兩邊定寬元素的寬度，咱們作的首先是改變盒模型這樣加padding後不會改變本身在瀏覽器中佔的位置，而後在設置padding就能夠了，可是box-sizing這個屬性是css3的屬性，因此兼容性沒有那麼好，若是你對兼容性的要求沒有那麼高，這是一種很好的選擇！若是你對兼容性要求比較嚴格，那麼就須要用到咱們的第二種方法：首先咱們得咱們的 main left right加一個父盒子，爲父盒子設置padding，而後再爲left right分別設置爲相對定位，而後設置一個margin的負值就達到了目的！這樣是否是豁然開朗，原理其實很簡單，下面是咱們的css代碼：

        .box{
            padding: 0 200px;
        }
        .middle{
            width: 100%;
            background: pink;
            height: 200px;
            float: left;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -200px;
            position: relative;
            right: -200px;
        }        

View Code

html：

                <div class = "box">
			<div class = "middle">11</div>
			<div class = "left"></div>
			<div class = "right"></div>
		</div>

　我把設置box-sizing的代碼也放在這兒，你們能夠參考！

        *{
            box-sizing: border-box;
        }
        .middle{
            width: 100%;
            background: pink;
            height: 200px;
            float: left;
            padding: 0 200px;
        }
        .left{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -100%;
        }
        .right{
            float: left;
            width: 200px;
            height: 200px;
            background: skyblue;
            margin-left: -200px;
        }

 

　下面是咱們要說的第二種方式：雙飛翼佈局（名字都不是我起的）

若是你好好看過上一種佈局的原理，這個理解起來就很快了！它首先也須要把main left right硬性的放在同一行，不過是換了一種讓main內容所有顯示的方法，方法就是在main的內部，加一個div，這個div設置一個margin，left rigth的值分別是margin-left和margin-right的值！這樣真正要顯示的內容實際放在middle>div裏！是否是很好理解。

兩個原理都明白了以後，雙飛翼和聖盃的區別也顯而易見！他們均可以完美的實現佈局，解決兼容性的問題，可是雙飛翼所需的代碼明顯比聖盃的少，並且思路更加簡單一點，全部略勝一籌，實際上雙飛翼就是聖盃的優化！青出於藍而勝於藍是很正常的事情！

下面是雙飛翼佈局的代碼！你們參考一下

css：

        .middle{
            width: 100%;
            height: 200px;
            float: left;
            background: skyblue;
        }
        .middle>div{
            margin:0 100px;
        }
        .left{
            width: 100px;
            float:left;
            height: 200px;
            background: pink;
            margin-left: -100%;
        }
    
        .right{
            margin-left:-100px;
            width: 100px;
            float:left;
            height: 200px;
            background: pink;
        }

View Code

html

                <div class = "middle">
			<div></div>
		</div>
		<div class = "left"></div>
		<div class = "right"></div>    

最終效果圖！兩者是同樣的

 

手打博客，轉發要註明噢！