瀑布流布局浅析（2）
作者：乔花 发布时间：2011-09-16 20:18:09
2) CSS3 定义。W3C 中有讲述关于多列布局的文档，排列出来的样子:
由 chrome/ff 浏览器直接渲染出来，可以指定容器的列个数，列间距，列中间边框，列宽度来实现；
#container {
-webkit-column-count: 5；
/*-webkit-column-gap: 10px；
-webkit-column-rule: 5px solid #333；
-webkit-column-width: 210px；*/
-moz-column-count: 5；
/*-moz-column-gap: 20px；
-moz-column-rule: 5px solid #333；
-moz-column-width: 210px；*/
column-count: 5；
/*column-gap: 10px；
column-rule: 5px solid #333；
column-width: 210px；*/
}
column-count 为列数； column-gap 为每列间隔距离； column-rule 为间隔边线大小； column-width 为每列宽度； 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏； 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏； 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。这边其实很简单，简易自己尝试下，详细可参考 https://developer.mozilla.org/en/CSS3_Columns 中的说明。 a href="http://lizzie.github.com/kissy/src/waterfall/demo/css3.html" jQuery16108010429281727349="9">
线上例子。
优点:
直接 CSS 定义，最方便了；
扩展方便，直接往容器里添加内容即可。
缺点:
只有高级浏览器中才能使用；
还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；
鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。
0
投稿猜你喜欢
- 描述tan() 返回x弧度的正弦值。语法以下是 tan() 方法的语法:import mathmath.tan(x)注意：tan()是不能直
- LCase：转成小写 UCase：转成大写 下面是ASP中的代码，可以直接演示效果的。 代码如下:<％ dim s
- doctest库就是一个测试用的标准库，从意义上我们可以看出是关于测试有关系的，基本上就是测试是否和自己想要的结果是否一致，经常能在编写文档
- 很多时候我们需要对数字进行格式化，比如位数不足前面加0补足。用PHP可以很轻易实现，因为PHP自带了相关功能的函数。<?php &nb
- 本文实例讲述了PHP变量作用域（全局变量&局部变量）&global&static关键字用法。分享给大家供大家参考，具
- Django是一个大而全的框架。需要明确的是，传参进行分页获取分页后的数据，一般都是通过向服务器发送get请求的方式实现的，在向后端服务发送
（一）什么是跨域同源请求就是指协议名、主机名、端口号三者一样跨域请求：是指协议名、主机名、端口号三者有任何一个不一样，而且跨域请求是请求发出- 如下所示：import pandas as pd from pandas import * import numpy as np data
- 代码#!/usr/bin/env python#coding=utf-8import random#生成[0, 1)直接随机浮点数print
- 方式一：直接通过数据库厂商提供的相关驱动步骤导入相关驱动（Build Path）创建Driver类的实例化对象获取要连接数据库的URL创建P
- 假设某宝为鼓励大家双12买买买，奖励双十一那天订单最多的两位用户：分别是用户1：“剁手皇帝陈哈哈” 和 用户2：“触手怪刘大莉” 一人一万元
- 集中式工作流(不常用)集中式工作流像SVN一样，以中央仓库作为项目所有修改的单点实体。所有修改都提交到 Master分支上。这种方式与 SV
- 首先定义了一个test.py的文件，然后再定义一个函数，并在函数定义后直接运行：test.pydef HaveFun(): if __nam
- 阅读作者的上一篇相关文章：段正淳的css笔记(3)标题右侧“更多”的实现 段正淳的css笔记(4)1、css代码的简写css缩写的语法，对新
- 一般上电子商务网站买东西的用户分三种：随便看看，就是不买先看看，买不买再说就是来买东西的这样的需求反应到产品页的购买按钮上，我们一般会看到购
- 需求背景：进行分值计算。如下图，如果只是一两个还好说，写写判断，但是如果有几十个，几百个，会不会惨不忍睹。而且，下面的还是三种情况。例如：解
- 前言Python 的一大优点就是丰富的类库，所以我们经常会用 pip 来安装各种库，所以对于Python开发用户来讲，PIP安装软件包是家常
- 拓扑排序几乎在所有的项目，甚至日常生活，待完成的不同任务之间通常都会存在着某些依赖关系，这些依赖关系会为它们的执行顺序行程表部分约束。对于这
- MD5消息摘要算法（英语：MD5 Message-Digest Algorithm），一种被广泛使用的密码散列函数，可以产生出一个128位（
- PHP PDO 预处理语句与存储过程很多更成熟的数据库都支持预处理语句的概念。什么是预处理语句？可以把它看作是想要运行的 SQL 的一种编译
