三九宝宝网宝宝绘画儿童画

把多个图片在网页中平铺需要哪些弹性布局属性

12月23日 编辑 39baobao.com

一、常见的方法

多列布局并不是只能由CSS实现,也可以使用表格同样实现能够根据浏览器窗口的大小而自由缩放的(流动)布局。以前,设计者会考虑到使用列来实现,每一列都由一系列表格单元格来构造。

图中显示了一个常用的布局结构,有一个页头横跨顶部、两列内容以及一个横跨底部的页脚。

常会看到与此类似的一种两列的布局结构

以前,我们似乎很自然地会使用表格来构建这种结构,用colspan这个特性使页头和页脚横跨于内容列的上方与下方。大致的 HTML代码如下所示:

header

content sidebar
footer

但大多数的设计者和开发者不会就此罢休。构造好了基础结构以后,会在这个结构中的每一个单元格中再嵌入表格,为布局创建边界和像素级别精度的间距。最终,为了使构造的结构和页面的样式能够更加变化灵活,会添加很多HTML代码。

为了达到流动可变性,可将表单元格的宽度设成百分比形式,这使得布局可以完全扩展而不需要考虑浏览器窗口的大小。

header

content

sidebar

footer

整个表格被设置成100%的宽度,列可以根据任意需要的宽度进行拆分。如图所示:左边是一个宽一些的内容栏,右边是一个窄一些的侧边栏。当浏览器窗口扩展或收缩而使布局的大小发生变化时,各列宽度的比例将保持不变。

这表明了表格能够用来构造布局,同时也表明了表格能够用来构造随浏览器窗口变化的流动布局。然而,还可以采用其他更完美的办法做到这一点。

推荐阅读
图文推荐