css佈局 - 工做中常見的兩欄佈局案例及分析

　　忽然想到要整理這麼一篇平時工做中至關常見可是咱們又很忽視的佈局的多種處理方法。臨時就在我常常瀏覽的網站上抓的相對應的截圖。（之後看到其餘類型的我再補充）

　　既然截了圖，我們就直接看人家使用的佈局方式，畢竟站在前輩肩膀上學習，我整理起來更輕鬆[哈哈]。（而後我再說一些我能想到的處理方式，幫助咱們在工做中應對不一樣的佈局結構時，選擇性的去找最適合本身頁面佈局的方法）

　　說在前面：爲了更好的看出來兩列結構，截圖我都作了藍線和紅線的框選。顏色較深的換成了黃線。總之就是爲了讓你一眼看出來，哪塊和哪塊。適合佈局萌新，大佬們請無視我。

　　目錄：

1、大結構上的導航欄和內容區域兩欄佈局

    一、博客園爲例

    二、騰訊課堂我的中心頁

    三、慕課網我的中心頁

    四、github我的中心頁

2、mini版的nav+cont結構

3、相似九宮格佈局的兩列結構

4、圖文兩列布局

    一、左圖右文字非垂直居中，

    二、左圖，右固定行數的文字，右側文字和左邊圖片垂直居中。

    三、左圖右文字溢出隱藏

5、左右兩端佈局

6、icon + 文字

7、最後加一個面試（送分）題

1、大結構上的導航欄和內容區域兩欄佈局

首先咱們從 大結構上 提及，由於我發現不少網站從整個首屏的大結構上都是這種兩欄佈局：

旁邊是側邊欄導航，中間是大塊內容區域。好比下圖中我學習經常使用的幾個網站

博客園我的中心頁

騰訊課堂我的中心頁面

騰訊課堂搜索界面

慕課網我的中心頁面

github我的中心頁面

四個網站截圖往這裏一貼，瞬間我以爲本身練成了《葵花寶典》

這佈局結構不能說如出一轍，但讓咱們前端看這就是同樣啊！！

咱們先來看看這四個網站的分別實現方式，說不定恰好就是四種實現方式呢啊哈哈哈哈~

一、博客園的：（比較正常的佈局實現）

大結構一個main包裹。

核心框架結構以下：

核心css，我總結有如下幾點：

1. 左邊內容、右邊nav均設置左浮動

2. main 沒有觸發bfc，也沒有使用僞元素清除浮動，而是使用了一個空標籤清除浮動。但咱們平時不用空標籤，而是用僞類元素。具體下邊css代碼中體現。

3. 右邊nav欄固定寬度，並用margin/padding-left隔開和左邊內容區域的距離

4. 值的注意的是左邊內容區域寬度設置爲百分百，並使用margin-left負值使得自身向左位移，以給右邊的nav騰出空間和左邊並列一排。

5. 由於mainCont向左移，超出了main區域。因此mainCont的兒子mainCont-inner使用margin-left再向右移動回來。

6. 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或背景色（好比本例）仍是會有超出看不到的問題。

二、騰訊課堂的：其結構和上一個恰好相反，nav在左側，實現原理差很少。

首先，html也很語義化、至關標準：（學習了）

相信這麼一張截圖，你已經看穿了一切。

其核心結構以下：

樣式關鍵點：

1. main父元素負責總體的水平居中。

2. nav負責左邊元素的左浮動+可展現寬度220px

3. mainCont負責佔據右邊剩餘位置，在這裏具體作法是讓其跟隨左側也造成浮動流。而後寬度100%，在浮動流的世界裏，mainCont再用margin-left不斷向左逼近，直到把nav佔據的220px找補回來（margin-left：-220px)。本身心滿意得的蓋住了nav。還得用padding把nav讓出來。

4. width：100%的元素使用了padding後的，寬度會增大。使用box-sizing把padding的寬度算到width中。

5. main僞元素after清楚浮動，解決父元素塌陷問題。

發現：若是把nav和mainCont的浮動都去掉，單純用margin負值不起做用。

具體css樣式

個人實現：

以爲左邊這裏浮動已經造成浮動流，他佔據左邊220像素的日子也付東流了。因此右邊這裏不必再浮動了。能夠直接使用padding-left把左邊nav佔據的220px空出來就好了。何況不用float就是塊級元素，連width啥的都不要了。mainCont裏邊只用這一行代碼就行：

簡陋效果

心得：

html語義化

外邊的那層結構用來佈局，裏邊的結構用來承載樣式。至於全局可繼承的屬性則能夠放到body。

對於騰訊網課程這個樣式，使用的左右固定寬度+左右浮動。不想整理了。感興趣的本身打開這個頁面查看吧。

三、慕課網的：左側absolute定位脫離文檔流，右側自適應。

哈哈哈，看到這裏我好開心，由於真的就像我開始說的，這仨網站的實現方式居然真的都不同。

左側浮動：

右側自適應，margin讓出左側範圍。

html結構：

樣式關鍵點：

1. main負責控制總寬度和水平居中。

2. 左側nav浮動

3. 右側內容區margin讓出nav的寬度範圍。自適應。

css樣式：

簡陋的效果

四、最後說Github，就比較簡單粗暴了

百分比寬度+浮動。

html結構：

樣式關鍵點分析：

1. main負責控制最大寬度和水平居中

2. main僞元素清除浮動

3. nav和cont都左浮動，而且使用百分比平分main的空間。

css結構：

簡陋樣式：

果真，四個網站四種樣式。看來平時多看看別人的代碼仍是很能開拓思路的。

 

2、mini版的nav+cont結構

像不像上邊大結構縮放0.5倍後的樣式。左邊內容區域（content），右邊導航欄（nav）。

看git的代碼，都是一個風格，幾乎寬度百分比定天下。上邊截圖代碼的一樣是這個思路，具體實現以下。

html大體結構：

css關鍵思路：

1. main依舊應該負責總寬度和水平居中之類的佈局，這裏由於這一小塊是嵌套在其餘結構裏的。就沒有什麼設置。

2. nav樣式上在右邊，可是結構上被放到了上邊。進行右浮動。這也是一個知識點：設置右浮動的元素結構放前邊比較好。具體緣由我給忘了。

3. 上邊h2通欄由於內容在左側，因此直接設置了100%寬度（也就是沒設置寬度）

4. h2右側的內容，利用浮動會造成文字環繞效果。讓該內容直接右浮動就自動繞開了nav的空間。

5. 內容區域設置了左浮動和自身視覺寬度上的width值（也就是設計稿上多寬這裏設置了多寬）不過個人愚見，以爲這裏能夠不設置浮動。反而設置上百分比寬度是爲了自適應頗有必要。

css代碼：

簡陋效果：

驚悚的是，我竟然沒有找到他的清除浮動。在哪~

3、相似九宮格佈局的兩列結構

github的實現方法是flex的兩端對齊：

關鍵點

1. 父元素ol設置display：flex，並兩端對齊。

完了

歡迎去看我整理的九宮格佈局的實現方法吧。雖然我整理的是一排三列。可是兩列也適用。

4、圖文兩列布局

一、左圖右文字非垂直居中，以右側內容撐開高度爲自由高度。這種的咱們省心，不用考慮垂直居中的問題。

關於這種左圖右文字的兩列布局，我上一篇已經寫了不少種實現方法了，這裏咱們使用最簡單的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;
   }

效果

二、左圖，右固定行數的文字，右側文字和左邊圖片垂直居中。這種實現方式就有限了。

同上，左圖右多行文字垂直居中，（截圖這裏限制了兩行）但實際開發中，我遇到過有的設計稿不限制行數還要有垂直居中的。

先說上邊這種，其實還用1的那種，圖片浮動右邊設置margin-left的方法也能夠。不過咱們爲了自適應的垂直居中，也就是假如我下邊那行座右銘文字過多換行的話，整個右邊紅框區域還能垂直居中：

這裏咱們用flex實現：

示例效果：

若是是pc端考慮兼容性實在不想用偉大的css3實現，也能夠這麼作：

inline-block + vertical-align 屢試不爽

txt這裏還有個寬度設置，截圖時還沒加入。。

無論是內容少：

仍是內容多，都能駕馭：（兼容性還好，想兼容ie六、7先出去槍斃本身幾分鐘，而後再回來寫inline-block的適配）

一樣，下邊這種，也是左邊圖（只不過是方形的），右邊是多行文案。同時這裏還設置了兩行固定顯示，更好說了：

三、左圖右文字溢出隱藏

關鍵點是左邊absolute「漂浮」起來（父元素須要relative限制一下）

而後右邊自適應佔據整個父元素的寬度，並用margin-left把左邊圖片遮擋的部位空出來。

奧對了，還有限制兩行溢出顯示小...,而且最底部是兩端佈局。

先說溢出小點點：

正常這麼設置，就是一行超出顯示小點點。像這樣：

若要控制規定行數顯示小點點：

這樣就是第二行顯示小點點了：

（授人以漁 - 能夠百度搜索「多行文本溢出顯示省略號點點點...」）

而至於兩端佈局見下邊。

 

5、左右兩端佈局

下邊畫了三處：

這個嵌套結構你看出來了嗎？事先沒看源碼前，我一打眼以爲是左邊一大塊，右邊一小塊的兩端佈局。可是細看發現原做把 logo單獨摘了出來，logo右邊的內容再分兩列兩端佈局。以下畫的紅框裏的綠和藍：

這個就簡單多了

左邊和右邊內容分別左右浮動：

flex兩端佈局

左邊左浮動，右邊寬度自適應並text-aligin：right；

文本兩端佈局

這種方式我想到了，可是代碼沒有實現。網上百度看別人實現了。有點尷尬。flag先立這裏，有時間實現了補上吧。

 

6、icon + 文字

能夠說是很是很是 常見的、幾乎100%設計稿必備結構了。

一、看個淘寶的截圖

這種通常都是文字不超過六個字，行數不超過一行。

其實都不能算是須要咱們注意的正兒八經的兩列結構了。可是我想說的是咱們工做中，經常抓耳撓腮的不是他的實現。而是在垂直方向上要求icon和文字居中的適配問題：

a、垂直居中問題：

圖和文字都是內聯塊元素，我通常都使用vertical-align實現，

b、垂直居中適配問題：

使用了vertical-align：middle，因爲文字的下沉特性，仍是以爲上下老是偏那麼幾像素不居中。前端看不出來，設計師走查都不給你過。要麼只能margin微調，但經常狀況是這個手機調好了，另外一個手機又不行了。此消彼長，跟打地鼠似的。那咱們怎麼破？

那就是我工做中佈局的一個小技巧，也是和張大神學的，vertical-align設置middle，而是設置具體的

像素值。至於設置多少，正值仍是負值都看你本身的實際項目和效果上下調整便可。雖然是很小的一個點，可是工做中真的幫助我擋住了不少測試提的同類型bug。

二、github的處理和我平時方法略顯不一樣：

用font字體+僞元素的處理方式

右邊的Beiging又一個padding-left值把左邊的icon讓了出來。而左邊的icon使用的字體，放在i標籤的僞元素before上了。

對了，說到僞元素，問一個很基礎可是不少人都混亂的問題：

請問什麼是僞元素，什麼是僞類？僞元素的權重高仍是僞類的權重高？

這是一個前端老阿姨我親身經歷的題。雖然簡單的不像話，可是我摔得也很不像話。哈哈哈。順便提一下，讓每個看到的你內心回憶一下這個點。歡迎基礎紮實的你的留言～

好了，終於把本身心血來潮列的目錄添滿了，我和個人電腦如今都反映很慢了。那就完了？固然不是，由於，還有，一個！！！

7、最後加一個面試（送分）題

題目：移動端的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;
}

　　

解法2、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;
}

　　

解法3、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是爲了留出按鈕的位置，不讓按鈕擋住文字。

解法4、定位佈局

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;
}