這種兩列布局的樣式是我們在平時工作中非常常見的設計，同時也是面試中要求實現的高頻題。很有必要掌握以備不時之需：
整理了幾種實現方法，當然，風騷的代碼不止這幾種能實現，歡迎各位的補充。
方法匯總目錄
-
簡單粗暴float來實現
-
absolute"離家出走"定位過去
-
聖杯布局 - margin負邊距
-
高貴優雅flex輕松搞定
-
table表示不服氣，憑什么我要被拋棄
-
衍生 - display:table-cell;
-
pc端定死寬？那inline-block攜手width也是個好方法
* 以下匯總方法不貼圖的，都是和上邊這個圖一模一樣的效果。
案例初始化html結構如下：
案例這里使用的結構比較簡單，但是核心思想是實現左邊固定，右邊自適應。
具體你業務中左邊長啥樣，右邊內部又有啥復雜結構，那就要視具體情況了。
但是大的思想結構和模型有了以后，再往里邊填充細節就比較好說了。
<div class="cont">
<div class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</div>
<div class="txt">
這里邊應該有很多文字的，為了篇幅我就刪掉了。
</div>
</div>
案例初始化css樣式如下：
/*
* @Author: @Guojufeng
* @Date: 2019-01-06 12:32:47
* @Last Modified by: @Guojufeng
* @Last Modified time: 2019-01-06 15:47:30
*/
/* common */
.cont{
border: 1px dashed #666;
padding: 20px;
}
.head{
width: 150px;
height: 150px;
background: #eee;
border-radius: 8px;
overflow: hidden;
}
.head img{
display: block;
width: 100%;
}
以下的幾種實現基本上復用了上邊的這幾行css，單獨提了出來。不過除了width: 150px;其他都是跟核心思想無關痛癢的樣式美化了。
不說廢話，看下實現：
具體方法實現及分析：
一、float - 浮動實現
基本上我們看到這種並列排排站的布局，可能第一時間就會想到浮動。左浮動排隊。
不過這里其實一個浮動就行了：
利用浮動實現文字環繞圖片的效果，只需要給左邊的圖片一個左浮動，右邊的文字會自動貼合圍繞左邊的圖片。
然后我們再把右邊文字的環繞解決就行了（比如讓其形成bfc：規矩成塊，打破環繞。或者直接粗暴的margin遠離圖片）。
具體看下：
html：
<div class="cont cont-f clearfix">
<div class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</div>
<div class="txt">
這里邊應該有很多文字的，為了篇幅我就刪掉了，。。
</div>
</div>
css:
/* float實現 */
.cont-f{
}
.clearfix::after{
content: "";
clear: both;
display: table;
}
.cont-f .head {
float: left;
margin-right: 20px;
}
.cont-f .txt{
/* 形成bfc */
/* overflow: hidden; */
/* 170 = 圖片寬度150 + 二者間距20 */
padding-left: 170px;
/* margin-left: 170px; */
}
.cont-f .txt 里的三條，三選一即可。
float實現關鍵點解析
-
共同父元素cont需要清除浮動。可使用我們常用的偽元素清除浮動法或者直接利用bfc清除浮動。
-
左邊圖片左浮動float：left、固定寬度、設置margin-right（具體看需求）；
-
右邊文案自適應、overflow或padding或者margin解除文字環繞效果。注意padding或margin值=左邊圖片的寬度+二者之間的間距
-
如果想要圖片和文案是垂直居中的不太好實現
不過張大神說，這種左右結構的布局使用浮動，是對浮動的一種濫用（大概是這么個意思，也有可能我對其有曲解）。所以還是盡量避免。
二、absolute - 定位實現
有了第一種浮動流的思想啟示，我們可以想到，既然浮動元素不占據父元素流體空間，從而讓文案部分通過block自適應，達到了占據父元素的全部空間的效果。
那么另一種，通過絕對定位讓左邊元素漂浮起來，而不占用父元素流體空間，是不是也就可以實現這種效果了呢？!
html:
<div class="cont cont-a">
<div class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</div>
<div class="txt">
這里邊應該有很多文字的，為了篇幅我就刪掉了。
</div>
</div>
css:
/* 定位實現 */
.cont-a{
position: relative;
/* 防止文案過少時，父元素塌陷到高度低於圖片的高度 */
min-height: 150px;
}
.cont-a .head{
position: absolute;
/* 以下兩句讓圖片實現垂直居中，不需要可以不設置 */
top: 50%;
margin-top: -75px;
}
.cont-a .txt{
/* 這次就是這倆任選其一了，目的是把左邊圖片的位置空出來，防止圖片遮擋文字 */
/* padding-left: 170px; */
margin-left: 170px;
}
.cont-a .txt 里邊兩條任選其一即可。目的是防止文字在圖片下邊被遮擋。
absolute實現關鍵點解析
-
父元素設置relative相對定位以限制圖片的絕對定位、因為父元素的高度此時是需要文案高度撐開的，所以需要設置最低高度防止文案過少時父元素低於低於圖片高度
-
圖片使用absolute，"漂浮"起來。如果還想垂直居中，
-
右邊文案此時只需要怪怪的空開左邊圖片寬度+間距的位置即可
-
可以讓左邊圖片垂直居中：圖片用上50%的top+marginTop的負高度一半。原理或其他css3方法詳見《垂直居中布局的一百種實現方式》
這樣做，遺憾沒法做到隨着文字的多少讓右側文案自適應地垂直居中。不知道正在觀看的大佬你有什么好的方法嗎？
三、margin負邊距 - 聖杯布局
這種寫法很特別，我甚至還沒研究透他的原理。是從慕課網張大神的課程中學到的。
他的特殊之處在於，這種適用於圖片在右邊的情況，如下圖：
html：
<div class="cont cont-m clearfix">
<div class="txt">
這里邊應該有很多文字的，為了篇幅我就刪掉了。
</div>
<div class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</div>
</div>
css：
/* margin 負邊距實現 */
.cont-m{
}
.cont-m .head{
float: left;
margin-left: -150px;
}
.cont-m .txt{
float: left;
margin-right: 170px;
}
margin負邊距實現關鍵點解析
-
父元素清楚浮動
-
兩列都float：left
-
需要自適應的文案列margin-right等於固定寬度列的圖片寬度+二者間距
-
有固定寬度的圖片列，margin-left負邊距為自己的寬度。
* 適用於可以設置固定寬度的元素在右邊的結構
四、flex - 彈性布局
推薦阮一峰老師的flex講解
html：
<div class="cont cont-flex clearfix">
<div class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</div>
<div class="txt">
這里邊應該有很多文字的，為了篇幅我就刪掉了。。。
</div>
</div>
css：
/* flex 彈性布局實現 */
.cont-flex {
display: flex;
justify-content: space-between;
align-items: center;
/* 兼容性寫法自己添加吧，就是這么不負責任 */
}
.cont-flex .head {
}
.cont-flex .txt {
flex: 1;
padding-left: 20px;
}
對於文案較少的垂直居中布局也有效果，如下圖：
flex布局實現關鍵點解析
-
父元素設置display:flex;和justify-content:space-bettween;(兩端對齊)
-
父元素根據需要設置align-item:center;以實現垂直居中
-
圖片固寬元素不需要特殊設置，寬高即可
-
流體文案設置flex:1;自動分配剩余空間。
輕松彈性，垂直居中不是事兒。
五、table - 表格布局
這種古老的布局方式，雖然不怎么用，但是不妨礙他好用，老人家真的是很善心的，垂直居中都自動給你解決了。
特殊結構html：
<table class="cont cont-t">
<tbody>
<td class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</td>
<td class="txt">
這里應該有很多文字的，為了篇幅我就刪掉了。。。。
</td>
</tbody>
</table>
css:
/*不好意系，可以6到不用css*/
哈哈哈~
table布局實現關鍵點解析
-
結構放到tbale中
-
兩列分別放到兩個td中，固寬的td設置一個寬度即可
-
二者間距使用任何一個td設置左或右邊距即可。
-
同樣實現了垂直居中布局
[/小聲bb]這結構嵌套也太多了吧，[/開心一笑]不過少了很多樣式表現。
六、table-cell - 偽表格布局
有了table老人家的啟發，讓我想起來css中還有一個屬性display，他的值是可以仿造table的。
這樣結構我們還用正常的結構，樣式上偽造下table老人家。
html:
<div class="cont cont-tc clearfix">
<div class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</div>
<div class="txt">
這里有很多文字的，但是為了篇幅被我刪掉了
</div>
</div>
css:
/* table-cell */
.cont-tc{
display: table;
}
.cont-tc .head {
display: table-cell;
/* 如果需要垂直居中 */
vertical-align: middle;
}
.cont-tc .txt {
display: table-cell;
padding-left: 20px;
vertical-align: top;
/* 如果需要垂直居中 */
vertical-align: middle;
}
table-cell布局實現關鍵點解析
-
父元素display:table;(自己測試不設置這一條也可以)
-
兩列都設置display:table-cell;[w3c:此元素會作為一個表格單元格顯示（類似td 和 th）]
-
別忘了兩列之間的間隙，我比較喜歡用文字的左padding隔開。
-
如果需要垂直居中可以兩列都設置vertical-align:middle;
這種也可以實現垂直居中布局。
七、固定寬度+inline-block普通不一定普通
如果是pc端非自適應的布局，那么固定寬度也未嘗不是一個好方法。
html:
<div class="cont cont-w">
<div class="head">
<img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">
</div>
<div class="txt">
這里應該有很多文字的，但是為了篇幅被我刪掉了。。。
</div>
</div>
css:
/* 固寬 */
.cont-w{
width: 780px;
}
.cont-w .head {
display: inline-block;
vertical-align: middle;
}
.cont-w .txt {
display: inline-block;
vertical-align: middle;
margin-left: 20px;
width: 600px;
}
非自適應、固定寬度布局實現關鍵點解析
沒什么特殊性，一般都根據設計稿實現即可。不再列舉實現方式。
垂直居中布局-兩列都這么設置：
display: inline-block;
vertical-align: middle;
*最后說明：
這些都是自己照着設計稿現擼的不成熟的實現條件，具體工作中用的方法也就其中兩三個。
對於這幾種方案的兼容性或者坑點沒有完整深入的研究。歡迎遇到過坑的你提個成熟的建議。
另外，css真的相當靈活有趣，每一個方法中css的屬性不一定非要是我列舉的這幾條。
比如absolute和float的txt里邊，就有好幾種寫法可以解決。任選其一就好。
總結於：2019-01-06 15:54:48
下篇預告：常見的兩欄布局案例及分析
聲明：
請尊重博客園原創精神，轉載或使用圖片請注明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/