CSS(Cascading Style Sheets)是一种用于对HTML和XML等文档进行样式表(stylesheet)设计的语言。CSS可以通过各种方式来应用到HTML文档,其中之一是通过等量切割实现多列布局。
#container { width: 960px; margin: 0 auto; text-align: justify; } .col { width: 33%; display: inline-block; vertical-align: top; margin-left: -4px; *display: inline; zoom: 1; } .col:first-child { margin-left: 0; } p { margin-bottom: 20px; text-align: left; }
在上述代码中,使用了等量切割的技术,将一个固定宽度的容器分成了三列。每一列的宽度都是容器宽度的三分之一(33%),并且通过使用display:inline-block属性来实现列的横向排列。为了解决inline-block元素之间出现4像素空隙的问题,使用了margin-left:-4px和*display:inline两种技巧。其中,*display:inline是针对IE6及以下版本浏览器兼容的处理方式。
最后,在每一个列(col)中,通过设置vertical-align:top属性来让列中的内容顶部对齐,并且为了保证每一列中的文本对齐,设置了text-align:justify,将每一行的文本宽度均分。
本文可能转载于网络公开资源,如果侵犯您的权益,请联系我们删除。
0