突然想到要整理這么一篇平時工作中相當常見但是我們又很忽視的布局的多種處理方法。臨時就在我經常瀏覽的網站上抓的相對應的截圖。（以后看到其他類型的我再補充）
既然截了圖，咱們就直接看人家使用的布局方式，畢竟站在前輩肩膀上學習，我整理起來更輕松[哈哈]。（然后我再說一些我能想到的處理方式，幫助我們在工作中應對不同的布局結構時，選擇性的去找最適合自己頁面布局的方法）
說在前面：為了更好的看出來兩列結構，截圖我都做了藍線和紅線的框選。顏色較深的換成了黃線。總之就是為了讓你一眼看出來，哪塊和哪塊。適合布局萌新，大佬們請無視我。
目錄：
一、大結構上的導航欄和內容區域兩欄布局
1、博客園為例
2、騰訊課堂個人中心頁
3、慕課網個人中心頁
4、github個人中心頁
二、mini版的nav+cont結構
三、類似九宮格布局的兩列結構
四、圖文兩列布局
1、左圖右文字非垂直居中，
2、左圖，右固定行數的文字，右側文字和左邊圖片垂直居中。
3、左圖右文字溢出隱藏
五、左右兩端布局
六、icon + 文字
七、最后加一個面試（送分）題
一、大結構上的導航欄和內容區域兩欄布局
首先我們從 大結構上 說起，因為我發現很多網站從整個首屏的大結構上都是這種兩欄布局：
旁邊是側邊欄導航，中間是大塊內容區域。比如下圖中我學習常用的幾個網站
博客園個人中心頁
騰訊課堂個人中心頁面
騰訊課堂搜索界面
慕課網個人中心頁面
github個人中心頁面
四個網站截圖往這里一貼，瞬間我覺得自己練成了《葵花寶典》
這布局結構不能說一模一樣，但讓我們前端看這就是一樣啊！！
我們先來看看這四個網站的分別實現方式，說不定剛好就是四種實現方式呢啊哈哈哈哈~
1、博客園的：（比較正常的布局實現）
大結構一個main包裹。
核心框架結構如下：
核心css，我總結有以下幾點：
-
左邊內容、右邊nav均設置左浮動
-
main 沒有觸發bfc，也沒有使用偽元素清除浮動，而是使用了一個空標簽清除浮動。但我們平時不用空標簽，而是用偽類元素。具體下邊css代碼中體現。
-
右邊nav欄固定寬度，並用margin/padding-left隔開和左邊內容區域的距離
-
值的注意的是左邊內容區域寬度設置為百分百，並使用margin-left負值使得自身向左位移，以給右邊的nav騰出空間和左邊並列一排。
-
因為mainCont向左移，超出了main區域。所以mainCont的兒子mainCont-inner使用margin-left再向右移動回來。
-
main的最外邊元素cnblogs-body設置百分比寬度，並用margin實現水平居中。
具體css樣式：
簡陋效果：
特別說明：
mainCont父元素margin-left: -22em; 子元素margin-left：22em;到底咋實現的？
mainCont父元素向左偏移，把右側nav的位置留了出來。剛好到-22em的時候，nav盛下了。但是他卻犧牲了自己，超出了屏幕外邊。
也就是這張圖一開始的樣式。左邊粉色超出了瀏覽器屏幕。里邊的文字都看不到了。
然后我們讓子元素mainCont-inner再margin-left把超出的位置頂回來。實際上就是讓其左邊超出main的位置都設置為margin的區域。這樣內容區域我們就能看到了。當然也可以設置padding-left：22em；不過那樣如果你的mainCont-inner里有border或背景色（比如本例）還是會有超出看不到的問題。
2、騰訊課堂的：其結構和上一個剛好相反，nav在左側，實現原理差不多。
首先，html也很語義化、相當標准：（學習了）
相信這么一張截圖，你已經看穿了一切。
其核心結構如下：
樣式關鍵點：
-
main父元素負責整體的水平居中。
-
nav負責左邊元素的左浮動+可展示寬度220px
-
mainCont負責占據右邊剩余位置，在這里具體做法是讓其跟隨左側也形成浮動流。然后寬度100%，在浮動流的世界里，mainCont再用margin-left不斷向左逼近，直到把nav占據的220px找補回來（margin-left：-220px)。自己心滿意得的蓋住了nav。還得用padding把nav讓出來。
-
width：100%的元素使用了padding后的，寬度會增大。使用box-sizing把padding的寬度算到width中。
-
main偽元素after清楚浮動，解決父元素塌陷問題。
發現：如果把nav和mainCont的浮動都去掉，單純用margin負值不起作用。
具體css樣式
我的實現：
覺得左邊這里浮動已經形成浮動流，他占據左邊220像素的日子也付東流了。所以右邊這里沒必要再浮動了。可以直接使用padding-left把左邊nav占據的220px空出來就行了。況且不用float就是塊級元素，連width啥的都不要了。mainCont里邊只用這一行代碼就行：
簡陋效果
心得：
html語義化
外邊的那層結構用來布局，里邊的結構用來承載樣式。至於全局可繼承的屬性則可以放到body。
對於騰訊網課程這個樣式，使用的左右固定寬度+左右浮動。不想整理了。感興趣的自己打開這個頁面查看吧。
3、慕課網的：左側absolute定位脫離文檔流，右側自適應。
哈哈哈，看到這里我好開心，因為真的就像我開始說的，這仨網站的實現方式竟然真的都不一樣。
左側浮動：
右側自適應，margin讓出左側范圍。
html結構：
樣式關鍵點：
-
main負責控制總寬度和水平居中。
-
左側nav浮動
-
右側內容區margin讓出nav的寬度范圍。自適應。
css樣式：
簡陋的效果
4、最后說Github，就比較簡單粗暴了
百分比寬度+浮動。
html結構：
樣式關鍵點分析：
-
main負責控制最大寬度和水平居中
-
main偽元素清除浮動
-
nav和cont都左浮動，並且使用百分比平分main的空間。
css結構：
簡陋樣式：
果然，四個網站四種樣式。看來平時多看看別人的代碼還是很能開拓思路的。
二、mini版的nav+cont結構
像不像上邊大結構縮放0.5倍后的樣式。左邊內容區域（content），右邊導航欄（nav）。
看git的代碼，都是一個風格，幾乎寬度百分比定天下。上邊截圖代碼的同樣是這個思路，具體實現如下。
html大致結構：
css關鍵思路：
-
main依舊應該負責總寬度和水平居中之類的布局，這里因為這一小塊是嵌套在其他結構里的。就沒有什么設置。
-
nav樣式上在右邊，但是結構上被放到了上邊。進行右浮動。這也是一個知識點：設置右浮動的元素結構放前邊比較好。具體原因我給忘了。
-
上邊h2通欄因為內容在左側，所以直接設置了100%寬度（也就是沒設置寬度）
-
h2右側的內容，利用浮動會形成文字環繞效果。讓該內容直接右浮動就自動繞開了nav的空間。
-
內容區域設置了左浮動和自身視覺寬度上的width值（也就是設計稿上多寬這里設置了多寬）不過我的愚見，覺得這里可以不設置浮動。反而設置上百分比寬度是為了自適應很有必要。
css代碼：
簡陋效果：
驚悚的是，我居然沒有找到他的清除浮動。在哪~
三、類似九宮格布局的兩列結構
github的實現方法是flex的兩端對齊：
關鍵點
-
父元素ol設置display：flex，並兩端對齊。
完了
歡迎去看我整理的九宮格布局的實現方法吧。雖然我整理的是一排三列。但是兩列也適用。
四、圖文兩列布局
1、左圖右文字非垂直居中，以右側內容撐開高度為自由高度。這種的我們省心，不用考慮垂直居中的問題。
關於這種左圖右文字的兩列布局，我上一篇已經寫了很多種實現方法了，這里我們使用最簡單的float實現：
<div class="wrapper"> <div class="img"></div> <div class="txt">我是右邊內容示范區</div> </div>
以下，img和txt的第一行才是最核心的布局代碼，其他都是美化用的樣式代碼。
.img{
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
background: #eee;
}
.txt{
margin-left: 70px;
border: 1px solid salmon;
height: 150px;
line-height: 150px;
text-align: center;
}
效果
2、左圖，右固定行數的文字，右側文字和左邊圖片垂直居中。這種實現方式就有限了。
同上，左圖右多行文字垂直居中，（截圖這里限制了兩行）但實際開發中，我遇到過有的設計稿不限制行數還要有垂直居中的。
先說上邊這種，其實還用1的那種，圖片浮動右邊設置margin-left的方法也可以。不過我們為了自適應的垂直居中，也就是假如我下邊那行座右銘文字過多換行的話，整個右邊紅框區域還能垂直居中：
這里我們用flex實現：
示例效果：
如果是pc端考慮兼容性實在不想用偉大的css3實現，也可以這么做：
inline-block + vertical-align 屢試不爽
txt這里還有個寬度設置，截圖時還沒加入。。
不管是內容少：
還是內容多，都能駕馭：（兼容性還好，想兼容ie6、7先出去槍斃自己幾分鍾，然后再回來寫inline-block的適配）
同樣，下邊這種，也是左邊圖（只不過是方形的），右邊是多行文案。同時這里還設置了兩行固定顯示，更好說了：
3、左圖右文字溢出隱藏
關鍵點是左邊absolute“漂浮”起來（父元素需要relative限制一下）
然后右邊自適應占據整個父元素的寬度，並用margin-left把左邊圖片遮擋的部位空出來。
奧對了，還有限制兩行溢出顯示小...,並且最底部是兩端布局。
先說溢出小點點：
正常這么設置，就是一行超出顯示小點點。像這樣：
若要控制規定行數顯示小點點：
這樣就是第二行顯示小點點了：
（授人以漁 - 可以百度搜索“多行文本溢出顯示省略號點點點...”）
而至於兩端布局見下邊。
五、左右兩端布局
下邊畫了三處：
這個嵌套結構你看出來了嗎？事先沒看源碼前，我一打眼覺得是左邊一大塊，右邊一小塊的兩端布局。但是細看發現原作把 logo單獨摘了出來，logo右邊的內容再分兩列兩端布局。如下畫的紅框里的綠和藍：
這個就簡單多了
左邊和右邊內容分別左右浮動：
flex兩端布局
左邊左浮動，右邊寬度自適應並text-aligin：right；
文本兩端布局
這種方式我想到了，但是代碼沒有實現。網上百度看別人實現了。有點尷尬。flag先立這里，有時間實現了補上吧。
六、icon + 文字
可以說是非常非常 常見的、幾乎100%設計稿必備結構了。
1、看個淘寶的截圖
這種一般都是文字不超過六個字，行數不超過一行。
其實都不能算是需要我們注意的正兒八經的兩列結構了。但是我想說的是我們工作中，常常抓耳撓腮的不是他的實現。而是在垂直方向上要求icon和文字居中的適配問題：
a、垂直居中問題：
圖和文字都是內聯塊元素，我一般都使用vertical-align實現，
b、垂直居中適配問題：
使用了vertical-align：middle，由於文字的下沉特性，還是覺得上下總是偏那么幾像素不居中。前端看不出來，設計師走查都不給你過。要么只能margin微調，但常常情況是這個手機調好了，另一個手機又不行了。此消彼長，跟打地鼠似的。那我們怎么破？
那就是我工作中布局的一個小技巧，也是和張大神學的，vertical-align設置middle，而是設置具體的
像素值。至於設置多少，正值還是負值都看你自己的實際項目和效果上下調整即可。雖然是很小的一個點，但是工作中真的幫助我擋住了很多測試提的同類型bug。
2、github的處理和我平時方法略顯不同：
用font字體+偽元素的處理方式
右邊的Beiging又一個padding-left值把左邊的icon讓了出來。而左邊的icon使用的字體，放在i標簽的偽元素before上了。
對了，說到偽元素，問一個很基礎但是很多人都混亂的問題：
請問什么是偽元素，什么是偽類？偽元素的權重高還是偽類的權重高？
這是一個前端老阿姨我親身經歷的題。雖然簡單的不像話，但是我摔得也很不像話。哈哈哈。順便提一下，讓每一個看到的你心里回憶一下這個點。歡迎基礎扎實的你的留言～
好了，終於把自己心血來潮列的目錄添滿了，我和我的電腦現在都反映很慢了。那就完了？當然不是，因為，還有，一個！！！
七、最后加一個面試（送分）題
題目：移動端的input輸入框自適應。
類似效果如下：
解法一：flex：
html:
<div class="box"> <input type="text"> <button>按鈕</button> </div>
css:
.box{
background: rgb(218, 255, 184);
padding: 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
input{
flex: 1;
}
button{
width: 80px;
}
解法二、float布局
html:
<div class="box">
<button>按鈕</button>
<div class="input-box">
<input type="text">
</div>
</div>
css:
.box{
background: rgb(218, 255, 184);
padding: 5px;
/* display: flex;
align-items: center;
justify-content: space-between; */
}
.input-box{
width: 100%;
margin-left: 80px;
}
input{
width: 100%;
/* flex: 1; */
}
button{
width: 80px;
float: left;
}
解法三、float+margin負邊距
html:
<div class="box">
<div class="input-box">
<input type="text">
</div>
<button>按鈕</button>
</div>
css:
.box{
background: rgb(218, 255, 184);
padding: 5px;
/* display: flex;
align-items: center;
justify-content: space-between; */
}
.input-box{
float: left;
width: 100%;
margin-right: -80px;
}
input{
width: 100%;
border: 1px solid #eee;
padding: 5px 90px 4px 10px;
box-sizing: border-box;
/* flex: 1; */
}
button{
width: 80px;
}
ps:
padding-right： 90是為了留出按鈕的位置，不讓按鈕擋住文字。
解法四、定位布局
html:
<div class="box">
<div class="input-box">
<input type="text">
</div>
<button>按鈕</button>
</div>
css:
.box{
background: rgb(218, 255, 184);
padding: 5px;
/* display: flex;
align-items: center;
justify-content: space-between; */
position: relative;
height: 40px;
}
.input-box{
/* float: left;
width: 100%;
margin-right: -80px; */
position: absolute;
left: 0;
right: 80px;
}
input{
width: 100%;
border: 1px solid #eee;
/* padding: 5px 90px 4px 10px; */
padding: 5px 10px;
box-sizing: border-box;
/* flex: 1; */
}
button{
width: 80px;
position: absolute;
right: 0;
}