关于网页两栏、三栏的布局讨论由来已久，有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案，而是一个专门针对两栏图文混排的特定需求的改进型方案。当然其中的原理也可以被应用于两栏布局甚至更多，那是你举一反三，不是本文讨论的重点。你也可以先看一下最终的示例页面。 开始之前，首先来看一下我们的需求：

1. 一个通用的结构，可以放在不同宽度的布局列中；
2. 该结构基本构成为左图（头像）右文（多种结构），左右宽度均不固定；
3. 左栏宽度由内容最小宽度确定，右栏无论内容多少要占满容器剩余宽度；
4. 右栏可能有定位元素超出自身范围，要予以显示，且右栏的内容不能环绕左栏；
5. 右栏中可能会再包含浮动，因此右栏需要清除自身内容的浮动。 实际上针对类似需求，网上也有不少方案，建议参考阅读

这篇长文以及涛哥简练实用的自适应的图文混排。根据需求，我们能确定出最基本的结构：

<div class="img-txt">
    <div class="img">左图</div>
    <div class="txt">右文</div>
</div>

安装两列布局的传统做法，我们可以想到两列都浮动、左栏浮动+右栏左边距以及负边距等很多方案。但是再对比一下需求，右栏的特性否决了两栏都浮动的方式，左栏的宽度不固定否定了负边距的方式。左栏浮动加右栏左边距将会遭遇webkit核心浏览器的BFC元素边距bug。 所以我们只能选择左栏浮动（浮动元素宽度最小，内容可以撑开），右栏不浮动（不浮动的block元素默认占满行宽）。但是不浮动的右栏既不能环绕左栏，又不能加左边距。怎么办？理所当然的就该想到BFC元素了。

涛哥的方案就是这样出来的。我们在腾讯朋友的项目中已经非常大量地实践了这种方案，效果不错。该方案的核心是右栏通过overflow:hidden来创建一个块级上下文（Block Formatting Context），这样同时满足了右栏宽高自适应和不环绕左栏两个需求，我的方案也是在此之上的一个改进。 既然已经有了经过实践验证的方案，为什么要改进呢？因为我们在实践中也遇到了一些麻烦，那就是右栏中的复杂内容，复杂到会有溢出容器的浮层。但是overflow:hidden的存在迫使我们必须把右栏里的定位元素放到右栏结构之外。虽然能解决问题，但是结构上就不符合逻辑了。 所以我们的需求可以抽象为两点：一、创建块级上下文；二、不能使用overflow:hidden。前几天我翻译了一篇文章在非IE浏览器中模拟zoom创建块级上下文，恰好解决了这个矛盾——在IE中用zoom创建块级上下文，在其它浏览器中模拟IE的zoom创建块级上下文。 回到我们的结构中来说：

• img-txt要清除浮动（否则当右栏高度小于左栏时，img-txt的高度撑不开），关于清除浮动的方式，之前已经给出了改进的方案。
• img要左浮动，img和txt之间的距离只能加在img上（原因之前说了，webkit的bug）。
• txt要创建BFC，要清除浮动（这两个问题在模拟zoom的时候一并解决了）。

有了这些前提，我的方案得来全不费功夫。首先是img-txt容器清除浮动：

.img-txt:before,
.img-txt:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.img-txt:after {clear: both;}
.img-txt {zoom: 1;} 

  然后是img的左浮动加右边距（注意IE6的3像素文本慢移bug）：

.img {
    float:left;
    margin-right:10px;
    _margin-right:7px;
} 

然后，txt创建BFC，同时清除自身子元素的浮动：

.txt {
    display:table-cell;
    #zoom:1;
}
.txt:after {
    clear: both;
    display: block;
    visibility: hidden;
    overflow: hidden;
    height: 0 !important;
    line-height: 0;
    font-size: xx-large;
    content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}

  行了。现在这个结构就可以搬到网页上的任意地方去，右栏内部喜欢放文字也好、图文并茂也好、有浮动也好、有定位也好，都能胜任了。现在如果你再看一下示例页面，你应该会更容易理解这些例子了。 感谢涛哥，推荐了如此精彩的几篇文章让我翻译。

作者：小李刀刀
原文链接：自适应的多列图文混排改进
裁纸刀下版权所有，允许非商业用途转载，转载时请原样转载并标明来源、作者，保留原文链接。