css布局 - 两栏自适应布局的几种实现方法汇总

这种两列布局的样式是咱们在平时工做中很是常见的设计，同时也是面试中要求实现的高频题。颇有必要掌握以备不时之需：

 整理了几种实现方法，固然，风骚的代码不止这几种能实现，欢迎各位的补充。

 

方法汇总目录

1. 简单粗暴float来实现

2. absolute"离家出走"定位过去

3. 圣杯布局 - margin负边距

4. 高贵优雅flex轻松搞定

5. table表示不服气，凭什么我要被抛弃

6. 衍生 - display:table-cell;

7. 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;其余都是跟核心思想无关痛痒的样式美化了。

不说废话，看下实现：

具体方法实现及分析：

1、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实现关键点解析

1. 共同父元素cont须要清除浮动。可以使用咱们经常使用的伪元素清除浮动法或者直接利用bfc清除浮动。

2. 左边图片左浮动float：left、固定宽度、设置margin-right（具体看需求）；

3. 右边文案自适应、overflow或padding或者margin解除文字环绕效果。注意padding或margin值=左边图片的宽度+两者之间的间距

4. 若是想要图片和文案是垂直居中的不太好实现

不过张大神说，这种左右结构的布局使用浮动，是对浮动的一种滥用（大概是这么个意思，也有可能我对其有曲解）。因此仍是尽可能避免。

 

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实现关键点解析

1. 父元素设置relative相对定位以限制图片的绝对定位、由于父元素的高度此时是须要文案高度撑开的，因此须要设置最低高度防止文案过少时父元素低于低于图片高度

2. 图片使用absolute，"漂浮"起来。若是还想垂直居中，

3. 右边文案此时只须要怪怪的空开左边图片宽度+间距的位置便可

4. 可让左边图片垂直居中：图片用上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负边距实现关键点解析

1. 父元素清楚浮动

2. 两列都float：left

3. 须要自适应的文案列margin-right等于固定宽度列的图片宽度+两者间距

4. 有固定宽度的图片列，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布局实现关键点解析

1. 父元素设置display:flex;和justify-content:space-bettween;(两端对齐)

2. 父元素根据须要设置align-item:center;以实现垂直居中

3. 图片固宽元素不须要特殊设置，宽高便可

4. 流体文案设置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布局实现关键点解析

1. 结构放到tbale中

2. 两列分别放到两个td中，固宽的td设置一个宽度便可

3. 两者间距使用任何一个td设置左或右边距便可。

4. 一样实现了垂直居中布局

[/小声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布局实现关键点解析

1. 父元素display:table;(本身测试不设置这一条也能够)

2. 两列都设置display:table-cell;[w3c:此元素会做为一个表格单元格显示（相似td 和 th）]

3. 别忘了两列之间的间隙，我比较喜欢用文字的左padding隔开。

4. 若是须要垂直居中能够两列都设置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;
}

 

非自适应、固定宽度布局实现关键点解析

没什么特殊性，通常都根据设计稿实现便可。再也不列举实现方式。

垂直居中布局-两列都这么设置：

　　display: inline-block;

　　vertical-align: middle;

 

*最后说明：

这些都是本身照着设计稿现撸的不成熟的实现条件，具体工做中用的方法也就其中两三个。

对于这几种方案的兼容性或者坑点没有完整深刻的研究。欢迎遇到过坑的你提个成熟的建议。

 

另外，css真的至关灵活有趣，每个方法中css的属性不必定非要是我列举的这几条。

好比absolute和float的txt里边，就有好几种写法能够解决。任选其一就好。

总结于：2019-01-06 15:54:48

下篇预告：常见的两栏布局案例及分析

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/