收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2702|回复: 5

[教程] 使用UL进行宽度固定的多行多列布局

[复制链接]
发表于 2008-4-21 16:48:34 | 显示全部楼层 |阅读模式
几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教。

当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式:



使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法,那就是使用<ul>列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用<ul>来进行页面的多列布局。





这是一个固定宽度的布局,也就是说流动性不强,流动性的布局目前还没有试验过,等有时间了再试验一下,下面贴上这个布局的代码:

 提示:您可以先修改部分代码再运行


这段代码在IE7及FF3下都能正常显示,其他浏览器未做测试。
请指正其中的不当之处。

[[i] 本帖最后由 ssdu22 于 2008-4-21 17:06 编辑 ]
发表于 2008-4-21 17:02:26 | 显示全部楼层
布局是根据实际情况的。不过我估计并不实用。实际的页面,包含了各种图片,标题,小标题。tab切换。你难道想把所有的内容都塞到<li></li>里去?这显然和语意不符。
回复 支持 反对

使用道具 举报

发表于 2008-4-21 17:06:34 | 显示全部楼层
布局是根据实际情况出发考虑的,你这样的想法显然不符合语义的
回复 支持 反对

使用道具 举报

发表于 2008-4-21 17:31:58 | 显示全部楼层
楼主可以考虑下用负边距的方法,参考如下:
http://bbs.blueidea.com/thread-2848520-1-1.html
回复 支持 反对

使用道具 举报

发表于 2008-4-22 09:21:13 | 显示全部楼层
楼主你这样的做法和TABLE有什么区别,比TABLE还糟糕。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-4-22 15:38:10 | 显示全部楼层
仅仅是疯狂而另类的想法而已
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-13 20:54 , Processed in 0.093516 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表