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

方法汇总目录

• 简单粗暴float来实现
• absolute"离家出走"定位过去
• 圣杯布局 - margin负边距
• 高贵优雅flex轻松搞定
• table表示不服气，凭什么我要被抛弃
• 衍生 - display:table-cell;
• pc端定死宽？那inline-block携手width也是个好方法

* 以下汇总方法不贴图的，都是和上边这个图一模一样的效果。

案例初始化html结构如下：

案例这里使用的结构比较简单，但是核心思想是实现左边固定，右边自适应。

具体你业务中左边长啥样，右边内部又有啥复杂结构，那就要视具体情况了。

但是大的思想结构和模型有了以后，再往里边填充细节就比较好说了。

1 2 3 4 5 6 7 8

<div class="cont">   <div class="head">     <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">   </div>   <div class="txt"> 　　这里边应该有很多文字的，为了篇幅我就删掉了。      </div> </div>

案例初始化css样式如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

/* * @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：

1 2 3 4 5 6 7 8

<div class="cont cont-f clearfix">   <div class="head">     <img src="https://pic.cnblogs.com/avatar/956663/20170925150809.png" alt="">   </div>   <div class=