页面载入后通过js读取所有class='tt'的图片,再往图片页面插入一个包含文字与按钮的DIV,可是这时DIV会把图片下的内容挡住,怎么处理? 个人认为正确的做法是1.获取图像的父对象2.通过父对象在图片之前插入div作为图像容器,设置图像的float:left;3.将图片和另一包含文字的div插入图像容器4.删除图像 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 主要是对JS及DIV不熟.有否更详细些的解决方案? 是啊,为什么要绝对定位呢?如果非要div绝对定位的话, 可以给图片加个 margin-bottom 值等于 div的 offsetHeight +'px' 这样试试 你的图片和图片下文的内容都是在DIV里??? <div class='imgZoom'><img src="**"><div>要求是在图片下文加一个包含文字及按钮的DIV,such as: <div id='imgID'>这是图片1的描述信息[按钮1]</div>再次谢过大家了. 有活做了,没时间整了,你自己调试下吧,只在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> 谢谢.对方要求在IE6,IE7,firefox,safari下正常运行,疯掉了. javascript能写blog么? easyui tree 如何判断那个子节点属于那个根节点 请教关于js文件操作 为什么我这个网页右下角浮动窗口视频广告关闭后仍在播放啊 请问如何禁止外部JS代码执行,防止木马 JQUERY中做表单验证,谁有带时间的日期选择控件? 关于通过javascript向word文档中写内容的问题 如何判断输入的文本是中文? PHP算法 js实现会议室预约功能的 问题 用 image 做提交按钮 请问一个英译中的问题,关于某某Literals
如果非要div绝对定位的话, 可以给图片加个 margin-bottom 值等于 div的 offsetHeight +'px' 这样试试
<div id='imgID'>
这是图片1的描述信息
[按钮1]
</div>
再次谢过大家了.
擅长,你自己改下吧
<!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>
对方要求在IE6,IE7,firefox,safari下正常运行,疯掉了.