这是一个创建于 4974 天前的主题，其中的信息可能已经有所发展或是发生改变。
经常可以看到一行中左边显示头像，右边显示内容的设计，大家是怎样实现的？
V2EX是直接用table布局。
Twitter是把头像设为float:left。
新浪微博是把内容设为float:right。
Google Reader的i界面是将图标绝对定位，内容设置padding-left。
我习惯让内容用绝对定位，并用left留出左边的空间放图片；或者图片绝对定位，内容设置margin-left（其实和Google Reader的做法差不多）。
不知道大家是怎么做的，各有什么优点？
V2EX是直接用table布局。
Twitter是把头像设为float:left。
新浪微博是把内容设为float:right。
Google Reader的i界面是将图标绝对定位，内容设置padding-left。
我习惯让内容用绝对定位，并用left留出左边的空间放图片；或者图片绝对定位，内容设置margin-left（其实和Google Reader的做法差不多）。
不知道大家是怎么做的，各有什么优点？
 |
1
romoo 2011-04-19 16:15:11 +08:00
以前喜欢用 float，现在多用绝对定位。没有分析过优缺点。
好奇 V2EX 回复为什么要用 table 呢？ |
 |
2
supersheep 2011-04-19 16:31:29 +08:00
我习惯浮动加margin
百度贴吧就不说了，豆瓣以前貌似也是用table的。 后端程序员风格…… |
 |
3
BB9z 2011-04-19 18:12:03 +08:00
确实没分析过优缺点，几次都是图片绝对定位，内容margin-left。
|
 |
4
yuest 2011-04-19 18:17:28 +08:00
头像 float:left
内容 overflow:hidden 缺点是不要有交互的东西（如菜单）在内容里面绝对定位显示超出内容框 |
 |
5
lamengao 2011-04-19 18:19:52 +08:00
我喜欢绝对定位，简单直观跨浏览器，缺点是如果以后要添加删除元素会增加维护难度。
|
|
6
yuest 2011-04-19 18:19:54 +08:00
可能 google 这种方式更好吧。内容只要设一个 min-height 就可以了
而且如果两边要不同背景颜色的话，把 margin-left 改成 border-left 就行 |
Select Language