Front Tech

YAML对三栏布局中CSS浮动问题的解决

Preface

Mentor在项目中提到一种叫做YAML的置标语言。在网上搜了一下,这是一种强调可读性,以数据为中心的置标语言,YAML的意思是YAML Ain’t a Markup Language(YAML不是一种置标语言),语法比较简单,Structure通过空格来展示。Sequence里的项用”-“来代表,Map里的键值对用”:”分隔,知道这几点就可以了,YAML比JSON还简单,借用官方的说法,是一种非常Friendly的格式。

很有趣的是我同时搜到了一个CSS框架,也叫YAML,不过这里是YAML是Yet Another Multicolumn Layout(另一个多栏布局)的缩写。本文主要针对的是后一个YAML,但不侧重于它的用法,而是学习它的写法。

YAML


YAML又一次体现了德国人的严谨作风,它有一份优秀易读,循序渐进的文档,有良好的目录结构,详细的注释,兼容所有我能找到的浏览器(包括IETEST上的IE5.5),而且考虑到了对网页打印格式的兼容。

在继续以下的无聊内容之前,先来看一个有趣的东西,YAML的在线Builder,可以以所见即所得的制作样式,它可以使用YAML已所见即所得的方式生成可用的HTML+CSS。

Float

好,然后才是本文真正的中心,关于浮动。想整理这个问题是因为老霍(公司的前端,可以一个人完成公司几乎所有前端页面的神人= =||),刚讲了XHTML的课,其中特地讲到了浮动。

首先是对浮动做一点小科普,已经非常熟悉的同学请跳过这一段。

我们最开始接触前端代码时,肯定用div做过两栏布局,或者是用li做过菜单。这时候就要给div或者是li设置float:left|right的样式,然后这些div和li就会排成一排了。这是因为当元素被声明为浮动对象时,就脱离了标准文本流,之后的元素会围绕在它周围,所以最初浮动常被用来处理图文混排的问题。比如上一节中靠左对齐的图片。但文本流不能自动停止,所以需要手动添加额外的html代码,常见的是添加一个空的p标签或者hr标签。

另一种方法可以参看How To Clear Floats Without Structural Markup一文,他定义了一个clear:both的类来实现:

这种方法在IE中并不适用(虽然文中也给出了IE的解决方法),因为IE不支持伪类:after。float在IE中会产生很多问题,比如我们熟知的float双倍margin,IE6的3px问题等等。

YAML对三栏布局的处理很值得学习。三栏布局要求左右两侧的容器——记作#col1和#col2——大小固定,中间的#col3容纳内容,是三个容器中最长的。用float来做三栏布局看起来很简单,但要完美兼容所有浏览器,能很好的适应内容就不那么简单了,我之前曾用这个问题来做前端的面试题,刷掉了不少人。

YAML将#col1和#col2设置为浮动,#col3则是静态的,#col1和#col2位于#col3之前,处于同一层级,然后固定#col1和#col2的宽度,#col3则设置左右两边的margin为#col1和#col2的宽度,就可以避免容器#col3中的内容和其他两个浮动栏产生冲突,让#col3的内容位于#col1和#col2之间。

在清除浮动的问题上,YAML利用上文提到的:after伪类来实现,不过做了一些特殊的处理。我们都知道,clear:both在静态容器中——比如上文提到#col3——是面向全局的,也就是说你设置之后,所以在#col3中就会产生垂直空间,YAML为了解决这个问题,使用了overflow

这样就不会产生垂直空间了。同时在浮动内容的外面也套上这个容器,就可以避免浮动图片从文本流中脱离的问题。

Afterword

我用过的CSS框架并不多,960px.gs一直是当成布局规范来用,并未视作一个css框架;clearCSS和YUI的一个CSS框架也有在用,但坦白来说并没有给我节约太多时间。YAML德语主页的pagerank高达8,应该是一个非常流行的css框架了。虽然对于我现在的工作中项目来说没什么太大帮助,但以后自己做什么小项目的时候,还是会考虑它的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.