匿名投稿
投稿指南
RSS订阅
| 以下为引用的内容： #info h3{ text-align:center; } #holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;} #holdit img {position:absolute; z-index:1; top:10px; left:10px; } #holdit p { margin:0px; position:relative; z-index:10; line-height:18px; text-align:justify; font-size:10px; font-family:verdana, arial, sans-serif} #holdit em {display:block; float:left; height:18px; clear:left; overflow:hidden; } .a230 {width:230px;} .a240 {width:240px;} .a250 {width:250px;} .a270 {width:270px;} .a300 {width:300px;} .a340 {width:340px;} .a360 {width:360px;} .a370 {width:370px;} .a400 {width:400px;} .a420 {width:420px;} .a430 {width:430px;} .a460 {width:460px;} .a490 {width:490px;} .a500 {width:500px;} .a540 {width:540px;} .a550 {width:550px;} |
接着我们来分析一下红色加亮的部分:
首先将包容对象#holdit设置成相对定位(确保等下的img绝对定位以它左上角为原点)
接着把#holdit里面的img设成绝对定位且z-index高度为1，这样img就脱离文档流了
将em标签设置左浮动，高度和p的ling-height要一样，再根据图片的图案分别设置每个em的宽度(记得要用clear来清除浮动)
最后把P设置成相对定位且z-index高度设置大于img的数值
其实我们也可以直接将图片作为为#holdit的背景，这样就不需要专门为img来设置CSS了