关于网页两栏、三栏的布局讨论由来已久,有各种各样上佳的方案。本文重点讨论的不是两栏、三栏布局这样通用的解决方案,而是一个专门针对两栏图文混排的特定需求的改进型方案。当然其中的原理也可以被应用于两栏布局甚至更多,那是你举一反三,不是本文讨论的重点。你也可以先看一下最终的示例页面。
开始之前,首先来看一下我们的需求:
这篇长文以及涛哥简练实用的自适应的图文混排。根据需求,我们能确定出最基本的结构:
<div class="img-txt">
<div class="img">左图</div>
<div class="txt">右文</div>
</div>
安装两列布局的传统做法,我们可以想到两列都浮动、左栏浮动+右栏左边距以及负边距等很多方案。但是再对比一下需求,右栏的特性否决了两栏都浮动的方式,左栏的宽度不固定否定了负边距的方式。左栏浮动加右栏左边距将会遭遇[cref bfc-element-margin-bug-in-webkit webkit核心浏览器的BFC元素边距bug]。 所以我们只能选择左栏浮动(浮动元素宽度最小,内容可以撑开),右栏不浮动(不浮动的block元素默认占满行宽)。但是不浮动的右栏既不能环绕左栏,又不能加左边距。怎么办?理所当然的就该想到BFC元素了。
涛哥的方案就是这样出来的。我们在腾讯朋友的项目中已经非常大量地实践了这种方案,效果不错。该方案的核心是右栏通过overflow:hidden来创建一个块级上下文(Block Formatting Context),这样同时满足了右栏宽高自适应和不环绕左栏两个需求,我的方案也是在此之上的一个改进。 既然已经有了经过实践验证的方案,为什么要改进呢?因为我们在实践中也遇到了一些麻烦,那就是右栏中的复杂内容,复杂到会有溢出容器的浮层。但是overflow:hidden的存在迫使我们必须把右栏里的定位元素放到右栏结构之外。虽然能解决问题,但是结构上就不符合逻辑了。 所以我们的需求可以抽象为两点:一、创建块级上下文;二、不能使用overflow:hidden。前几天我翻译了一篇文章在[cref the-hacktastic-zoom-fix-translation 非IE浏览器中模拟zoom创建块级上下文],恰好解决了这个矛盾——在IE中用zoom创建块级上下文,在其它浏览器中模拟IE的zoom创建块级上下文。 回到我们的结构中来说: * img-txt要清除浮动(否则当右栏高度小于左栏时,img-txt的高度撑不开),关于清除浮动的方式,之前已经给出了[cref clearfix-reloaded-overflowhidden-demystified-translation 改进的方案]。 * 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 ";
}
行了。现在这个结构就可以搬到网页上的任意地方去,右栏内部喜欢放文字也好、图文并茂也好、有浮动也好、有定位也好,都能胜任了。现在如果你再看一下示例页面,你应该会更容易理解这些例子了。 感谢涛哥,推荐了如此精彩的几篇文章让我翻译。