瀑布流布局浅析（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
投稿猜你喜欢
- 很简单的一个函数，就是根据当前的日期生成一个随机数。<％ Function getRnd() '**********
- jquery作为一款高质量的框架被大多web开发者所推崇。jquery也的确是一款伟大的产品，在实际开发中明显提高了效率。但是任何产品并不是
- 代码如下:---在仓储管理中经常会碰到的一个问题 一、关于LIFO与FIFO的简单说明 ---FIFO: First in, First o
- <html><head><title>不刷新页面查询的方法</title><meta
- Conditional-CSS允许你针对单一浏览器或浏览器组写出有逻辑条件的可维护的特定的CSS声明。使CSS针对特定的浏览器。简化你对CS
- 近来，随着XHTML（可扩展HTML）标准的出现，<script/>标签也经历了一些改变。该标签不再用language特性，而用
- 1.JOIN和UNION区别 join 是两张表做交连后里面条件相同的部分记录产生一个记录集， union是产生的两个记录集(字段要一样的)
- 平时在PL/SQL中的编程中遇到一些问题，这里以问答的形式来进行把它们总结下来，以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 我有大量的重要数据要从SQL Server导出到Access或Excel文件中去，手工做太麻烦，还有其它的好办法吗？有，我们在 SQL Se
- 几个常用的js小函数，在表单验证时也许您用得到：一检查是否是email地址，二检查是否为数字，三检查是否为电话号码，四检查num是否是负数或
- 下面的代码是从kesion系统扒下的，确实不错，支持utf8格式。代码如下:'===========================
- 在CSS规范中有一个渲染对象的概念，通常用一个盒子（box, rectangle）来表示。mozilla通过一个叫frame的对象对盒子进行
想到TDE(Transparent Data Encryption)。 TDE MSDN 说明: “透明数据加密”(TDE) 可对数据和日志- 比如一个汉字也只会算一个字节，在排版时如果全是汉字，好说，反正没什么差别，但是如果 * 作的字符串有汉字又有英文字母时，就不方便了，以下三个函
- 了兑现我对大家的承诺，我们现在立即就将“借助数据库和ASP程序”编写出来的，可以同时适用于IIS和P
- 也许已经有人发现可以这样写...CSS代码部分a.info { position:
- 在进行CSS网页布局开发时，您肯定遇到过形形色色的布局问题，虽然有大量的教程提供帮助，但最后可能被搞得焦头烂额。本文的目的是让您的设计过程更
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 10 - Using FX.TweenMooToo
- 一、什么是sql子查询？ 子查询是一个嵌套在Select 、Insert 、Update 或Dele
- 你的主页或者你管理的网站有各种密码需要保护，把密码直接放在数据库或者文件中存在不少安全隐患，所以密码加密后存储是最常见的做法。在ASP.NE
