使用文本缩进和外边距替代浮动

布局技巧：避免浮动的方法

转载于 2009-11-17 01:34:00 发布 · 67 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nicholaslai/archive/2009/11/17/3762631.html

本文介绍了一种在网页布局中避免使用浮动元素的技术，通过特定的布局方式达到美观且高效的显示效果，适用于标题列宽度固定的场景。

007

看到这样的布局时大家一般不外乎用以下两种方法：

左右两部分同时浮动，或两个同方向浮动，或一左一右浮动。
使用table标签，左边标题th，右边单元格td，这也是一种合理的结构

但如果标题列均为同字数宽度，例如这里是4个汉字（8个字符）宽，大家可以尝试以下方法：

这种方法既避免了浮动（总觉得浮动影响效率，有人也验证《浮动和绝对定位的性能问题》）,同时也用较少的代码（table的代码相对来说还是较多），实现图中的布局。

posted @ 2009-11-17 01:34 nicholaslai 阅读( ...) 评论( ...) 编辑收藏

刷新评论刷新页面返回顶部

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。