DIV+CSS布局实例:各种2栏3栏布局实例(附下载)

来源:网络 作者:佚名 阅读: 字体:[ ] [打印] [关闭]
自定义标签 wzsp 未创建

内容提要:Two Column Flexible Browsers: '' '' '' '' (5+) Description: Probably the easiest page to make. Contains two layout divs, the main content div is just floated to the left. Very simple! Actions: View ……

式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度,不过你也可以把它的宽度设置为其它具体值。类似的,div#right样式中的float:right申明用来把右栏div挤压到右侧。在本例中,float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而,如果这些div被其它div包含,那么float将会把它们挤压到包含它们的div的边缘。

div#middle样式中,clear申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充,这样允许150象素宽度的栏div,在加上10象素的间距。

这个例子非常粗糙和简单,但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术。

上一页12
[标签: DIV+CSS布局实例:各种2栏3栏布局实例(附下载), ] [打印] [关闭]
站长评论(0) 查看所有评论
相关新闻

热门新闻

推荐新闻