正在载入……

Attention, Zin 的交互设计之路。

User interface, user experience and interactive design.

« 全手动安装开发环境:Apache+Python+PHP+Mysql支持Django框架如何开发维护一个项目之标准化[讨论] »

一种利用position:relative及absolutecss定义的图文混排样式

描述,这是一种定义图片或文字左右对齐的方法,可以保证文字不会因大于图片高度而包围图像换行。
xhtml代码:

<p><img src="imgpath" alt="image" />Text here</p>

通常,我们如果让图片靠左对齐或靠右对齐进行图文编辑时候会用到如下CSS

img{float:left;}

但这样的效果是文字包围图片,如果我们想让文字不会包围图片而是永远在一侧呢,使用如下CSS

p{position:relative;padding-left:100px/*图片宽度及相应与文字应保持的边距之和*/;}
p img{position:absolute;}

这样就可以了,关于position:relative及absolute的用法参考这里
PS:演变而来的更多应用,你想到了吗?
-------2008.11.7-------
IE6下可能出问题,可以给p加入

height:auto!important;height:1px;

即,如果不给容器定义大小将无法识别定位。

欢迎发表看法:

您的讨论更有价值!

控制面板

<< 2008-12 >>

Sun

Mon

Tue

Wed

Thu

Fri

Sat

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

最近留言