示例代码：浮动的虚假列

另外一个应用是创建一个不需要图片或者额外嵌套容器的等高列（小志注：这里展示的是三列等高的效果）。

这个HTML结构非常简单。我曾经依赖于CSS2.1选择器使用特定类名在每一个子元素的div标签上，但IE6不支持。假如不需要IE6的支持的话，并不需要指定类名。
[Copy to clipboard]View Code XML1
<div id="faux">
 <div class="main">[content]</div>
 <div class="supp1">[content]</div>
 <div class="supp2">[content]</div>
</div>

对这个拥有百分比的容器再次设置相对定位以及正值的z-index。应用overflow:hidden;主要是为了包含其子元素浮动后的容器（小志注：也就是清除浮动的一种方式），以及隐藏溢出的伪元素。背景颜色将作为其中一列的背景色。
Copy to clipboard]View Code CSS1
 #faux {
 position:relative;
 z-index:1;
 width:80%;
 margin:0 auto;
 overflow:hidden;
 background:#ffaf00;
}

通过定义子元素的div标签为相对定位之后，还可以控制单独列的位置。
Copy to clipboard]View Code CSS1
 #faux div {
 position:relative;
 float:left;
 width:30%;
}
 
#faux .main {left:35%}
#faux .supp1 {left:-28.5%}
#faux .supp2 {left:8.5%}

另外百分百高度的两列被建立于定位的位置和定位属性的伪元素，同时设置了背景色。这些背景可以用（重复的）图片代替，如果有需要的话。
Copy to clipboard]View Code CSS1
 #faux:before,
#faux:after {
 content:"";
 position:absolute;
 z-index:-1;
 top:0;
 left:33.333%;
 width:100%;
 height:100%;
 background:#f9b6ff;
}
 
#faux:after {
 left:66.667%;
 background:#79daff;
}

出处：小志博客
责任编辑：bluehearts

上一页 css2.1实现多重背景和边框效果 [2] 下一页 css2.1实现多重背景和边框效果 [4]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。