css佈局 - 兩欄自適應佈局的幾種實現方法彙總

時間 2019-12-06

標籤 css 佈局自適應幾種實現方法彙總欄目 CSS 简体版

原文原文鏈接

這種兩列布局的樣式是咱們在平時工做中很是常見的設計，同時也是面試中要求實現的高頻題。頗有必要掌握以備不時之需：css

整理了幾種實現方法，固然，風騷的代碼不止這幾種能實現，歡迎各位的補充。html

方法彙總目錄

簡單粗暴float來實現
absolute"離家出走"定位過去
聖盃佈局 - margin負邊距
高貴優雅flex輕鬆搞定
table表示不服氣，憑什麼我要被拋棄
衍生 - display:table-cell;
pc端定死寬？那inline-block攜手width也是個好方法

* 如下彙總方法不貼圖的，都是和上邊這個圖如出一轍的效果。css3

案例初始化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;其餘都是跟核心思想無關痛癢的樣式美化了。flex

不說廢話，看下實現：spa

具體方法實現及分析：

1、float - 浮動實現

基本上咱們看到這種並列排排站的佈局，可能第一時間就會想到浮動。左浮動排隊。設計

不過這裏其實一個浮動就好了：3d

利用浮動實現文字環繞圖片的效果，只須要給左邊的圖片一個左浮動，右邊的文字會自動貼合圍繞左邊的圖片。

而後咱們再把右邊文字的環繞解決就好了（好比讓其造成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值=左邊圖片的寬度+兩者之間的間距
若是想要圖片和文案是垂直居中的不太好實現

不過張大神說，這種左右結構的佈局使用浮動，是對浮動的一種濫用（大概是這麼個意思，也有可能我對其有曲解）。因此仍是儘可能避免。

2、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方法詳見《垂直居中佈局的一百種實現方式》

這樣作，遺憾無法作到隨着文字的多少讓右側文案自適應地垂直居中。不知道正在觀看的大佬你有什麼好的方法嗎？

3、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負邊距爲本身的寬度。

* 適用於能夠設置固定寬度的元素在右邊的結構

4、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;自動分配剩餘空間。

輕鬆彈性，垂直居中不是事兒。

5、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]這結構嵌套也太多了吧，[/開心一笑]不過少了不少樣式表現。

6、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;

這種也能夠實現垂直居中佈局。

7、固定寬度+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;
}