自适应css布局——流动布局新时代[译](6)
作者:dishuipiaoxiang 来源:蓝色理想 发布时间:2009-08-13 12:28:00
标签:自适应,布局,css
五、jQuery & CSS 智能栏
上面的修复方法解决了高度变换的div的问题。但对于想使用相等高度的布局来说,这未必是一个好的办法,Soh Tanaka 在他的 SohTanaka.com 网站上提供了一个jQuery脚本和一个智能的css使流动布局的栏能很漂亮的折叠和扩展,查看演示页Smart Columns w/ CSS & jQuery
jQuery & css智能栏是什么?
智能栏是一个脚本,为了得到更好的视觉效果,它改变divs的宽度,并决定在浏览器当前页面尺寸下会呈现多少栏?对于用户调整浏览器也很完美,而不是进入网页时仅仅照顾浏览器的尺寸。
脚本去掉每栏多余的空白--这可能是有浏览器的不同宽度导致的,然后用jQuery使栏均匀分布。
如何使用智能栏
在Soh Tanakas博客的 Smart Columns w/ CSS & jQuery
回帖中含有所有代码,它可以用列表设置,每个li作一个块。
<ul class="column">
<li>
<div class="block">
Block 1
</div>
</li>
<li>
<div class="block">
Block 2
</div>
</li>
<li>
<div class="block">
Block 3
</div>
</li>
</ul>
然后将css和jQuery代码插入到页面之中,这样智能栏就能实现。自定义代码很简单,只需简单的在css中编辑width、height、margin即可。


猜你喜欢
- OpenCV提供了很多简单的语句,实现复杂的功能,根据颜色和鼠标交互的基础语句,我们可以建立一个简单的画板。尽管它简单,但是制作的框架步骤不
- 内容介绍将日常工作中遇到的数数据冲突和样本源的方法进行总结,其中主要包括实际业务数据冲突、样本选取问题、数据共线性 等思路,并且长期更新。实
- 我的长博文不少,比较影响阅读体验,有必要添加一个文章目录功能。相比 Wordpress, Typecho 的插件就比较少了。我想找一个像掘金
- 先说一下最土的一种方法:Html:<div class="tab-head">
- 创建:list = [5,7,9]取值和改值:list[1] = list[1] * 5列表尾插入:list.append(4)去掉第0个值
- 可用下列函数来产生你需要的东西,将它们发送给用户就可以啦:<%response.write makePassword(16)
- 目录一、概念描述二、序列的可迭代性三、经典的迭代器模式四、生成器也是迭代器五、实现惰性迭代器六、使用生成器表达式简化惰性迭代器总结一、概念描
- 主要使用json模块,直接导入import json即可。小例子如下:#coding=UTF-8 import json info={} i
- 1. 创建用户模块应用创建应用users$ python manage.py startapp users 2. 注册用户模块应用
- 喜欢用Python写脚本的小伙伴可以跟着一起写一写呀。编写环境:Python2.x00x1:需要用到的模块需要用到的模块如下:import
- 这个帖子在51js看到的,觉得很有学习意义,看看高手们是怎么做的吧!提问者:infinte急求:正则或算法,JS VBS均可。要求:[1]支
- 这篇文章主要介绍了python线程信号量semaphore使用解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- python中正则表达式中的匹配次数问题网上有很多解释,最多的就是*匹配0或者无数次,+匹配1次或无数次,?匹配0次或者1次。可是虽然这个文
- 本文的JS效果是在鼠标点击ITEM标签的时候,实现下方的内容跟随滚动切换的效果,我们先来看下运行后的效果图。以下是脚本之家原创的运行代码:&
- 前言1.工作中,经常需要合并多个Excel文件。如果文件数量比较多,则工作量大,易出错,此时,可以使用Python来快速的完成合并。2.使用
- 函数的默认参数请勿定义可变类型经常会看到这样一句代码警告:Default argument value is mutable意思是告诉我们函
- 本文实例讲述了Python 类,property属性(简化属性的操作),@property,property()用法。分享给大家供大家参考,
- 游戏介绍先看看界面这是一个拼图游戏,可以自选难度和自选闯关图片游戏开始后根据不同难度,生成与所选主图 对应的 不同张数的 随机顺序的小图,然
- 这篇文章主要介绍了一种简单的MySQL数据库安装方法,详细内容请大家参考下文:虽然安装MySQL数据库的文章很多,但是我看后感觉对于初学者来
- 转:coolcode.cn前几天写了一篇在任意字符集下正常显示网页的方法,里面介绍的很简单,就是把前128个字符以外的字符集都用