页面载入后通过js读取所有class='tt'的图片,再往图片页面插入一个包含文字与按钮的DIV,可是这时DIV会把图片下的内容挡住,怎么处理?

个人认为正确的做法是
1.获取图像的父对象
2.通过父对象在图片之前插入div作为图像容器，设置图像的float:left;
3.将图片和另一包含文字的div插入图像容器
4.删除图像

解决方案 »

  1.   

    主要是对JS及DIV不熟.有否更详细些的解决方案?
      

  2.   

    是啊,为什么要绝对定位呢?
    如果非要div绝对定位的话, 可以给图片加个 margin-bottom 值等于 div的 offsetHeight +'px' 这样试试
      

  3.   

    你的图片和图片下文的内容都是在DIV里？？？
      

  4.   

    <div class='imgZoom'><img src="**"><div>要求是在图片下文加一个包含文字及按钮的DIV,such as: 
    <div id='imgID'>
    这是图片1的描述信息
    [按钮1]
    </div>
    再次谢过大家了.
      

  5.   

    有活做了，没时间整了，你自己调试下吧，只在firefox3.0下调试通过了，ie下css还需要修改，对这方面不
    擅长，你自己改下吧
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    #divArticle{
    width:500px;
    font-size:14px;
    color:#339966;
    line-height:160%;
    }#divArticle img{
    margin:10px 10px 10px 10px;
    }.div-img-container{
    float:left;
    height:100px;
    }.div-title{
    width:90%;
    height:20px;
    margin-left:5%;
    margin-right:5%;
    font-size:14px;
    text-align:center;
    border:1px solid #CC9999;
    float:left;
    }
    </style>
    <script type="text/javascript">
    function $(strId){
    return document.getElementById(strId);
    }
    function addTitle(){
    var oDivArt=$("divArticle");
    var oImgSrc=oDivArt.getElementsByTagName("img")[0];
    var oImgNew=oImgSrc.cloneNode(true);
    var oDivC=document.createElement("div");
    var oDivTitle=document.createElement("div");

    if(document.all){
        oDivC.className="div-img-container"
        oDivTitle.className="div-title"
    }else{
        oDivC.setAttribute("class","div-img-container");
        oDivTitle.setAttribute("class","div-title");
    }
    oDivC.style.width=oImgSrc.offsetWidth+20+"px";

    oDivTitle.innerHTML="图像标题";
    oDivC.appendChild(oImgNew);
    oDivC.appendChild(oDivTitle);
    oDivArt.insertBefore(oDivC,oImgSrc);
    //oDivArt.appendChild(oDivC);
    oDivArt.removeChild(oImgSrc);
    }
    </script>
    </head>
    <body>
    <input type="button" value="添加标题" onclick="addTitle()"/><br/>
    <div id="divArticle">
       <img src="http://www.baidu.com/img/baidu.gif" align="left"/>
      大家好,现在我在做这样的代码:在页面载入后,通过JS得到页面中所有的图片,如果class='tt'则向图片下方插入一个包含文字与按钮的  DIV(position:absolute,然后通过图片的TOP,与LEFT定义DIV的TOP与LEFT).可是这种情况下DIV会把原图片下文的  内容挡住.请教如何处理才能使图片下文的东西向下偏移呢? <br />
      谢谢大家了
    </div>
    </body>
    </html>
      

  6.   

    谢谢.
    对方要求在IE6,IE7,firefox,safari下正常运行,疯掉了.