因為最近心血來潮，就總結了一下css中的幾種常見的多列布局。
兩列自適應布局
兩列自適應布局算是css布局裡面最基礎的一種布局了，不少**在使用。
這種布局通常是左側固定，右邊自適應，當然也有反過來的，道理一樣，這裡有好幾種方法。
(張鑫旭老師的部落格是左邊流式布局，右邊固定寬度）因為浮動會導致元素脫離文件流，所以下面的元素會佔據浮動元素原來的位置。
這個時候只要對右邊元素設定margin-left:左邊div寬度 就可以實現自適應布局。
這個原理類似浮動，因為絕對定位會脫離文件流，只需要設定右div的margin-left就能實現布局。flex布局一直挺好用，無奈相容性捉急，ie10+才支援。
注意，設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
flex布局預設專案是主軸為水平方向，最主要的是flex屬性。flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。
大概就是給左邊的div乙個固定值，然後給右邊設定flex:auto;來實現兩列布局。
這裡不多對flex布局介紹，有興趣的可以看一下
這是css3裡面的新屬性，相容性還可以，在ie9+、ff4.0+、chrome19+、safari6+都得到了支援。
通過calc可以使用百分比、em、px和rem單位值計算出其寬度或者高度，這樣就不用考慮div值到底是多少。所以可以對右邊div設定width:calc(100%-100px);來實現自適應布局。
這是之前寫ife任務的時候在一篇部落格上看到的。
實現方法是給右邊的div外面再套上乙個父div，然後讓父div的寬度設為100%。
對父div和左邊的div都設定左浮動，再讓左div的margin-left:-100%,右div設定margin-left:左div的寬度。
這樣就實現了自適應布局，當然左右div的前後順序要反過來。
三列自適應布局
除了常見的兩列布局，我們也經常能夠見到三列布局，左右固定，中間自適應。
（這裡只是拿這張圖舉個例子，w3school官網是三列固定布局）這個類似兩列布局的浮動，對左右div分別設定左右浮動，中間div設定margin-left和margin-right來實現，當然在html中的順序應該是左右中。原理同margin負值實現兩列布局，不多說了。和flex兩列布局乙個原理，對兩邊設定flex:0 0 100px,中間設定flex:auto。css中的那些布局
因為最近心血來潮，就總結了一下css中的幾種常見的多列布局。兩列自適應布局 兩列自適應布局算是css布局裡面最基礎的一種布局了，不少 在使用。這種布局通常是左側固定，右邊自適應，當然也有反過來的，道理一樣，這裡有好幾種方法。張鑫旭老師的部落格是左邊流式布局，右邊固定寬度 因為浮動會導致元素脫離文件流...
css中div的布局
在靜態網頁的編寫中基本上都對布局的應用。概念問題說著容易，在實際操作的情況中網頁比較複雜，考慮的問題應該比較全面。可以先畫乙個框架圖，對各個板塊的長寬踐行計算再寫起來會更容易些。1.對div的位置和大小進行布局 我們可以將其假想為乙個矩形格式的模型，矩形模型如下圖所示 矩形模型主要包括三大屬性，正如...
css中的Sticky footer 布局
什麼叫sticky footer 布局呢？我們所見到的大部分 頁面，都會把乙個頁面分為頭部區塊 內容區塊和頁尾區塊，當頭部區塊和內容區塊內容較少時，頁尾能固定在螢幕的底部，而非隨著文件流排布。當頁面內容較多時，頁尾能隨著文件流自動撐開，顯示在頁面的最底部，這就是sticky footer布局。一般網...