内联元素包含块元素产生的现象

来源：互联网发布：小店微商城软件编辑：程序博客网时间：2024/05/22 07:01

今天调试代码的时候，本来的意思是用一个a元素包含一个div元素，div里面包含img元素，这样单击div元素的时候就可以跳转对应的页面地址。可以把下面页面复制到html页面中，点击图片查看是否可以跳转到百度，代码如下：

一、代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
  .thumb_item{
   float:left;
   width:105px;
   margin:6px;
   overflow: hidden;
   cursor:default;
  }
  .thumb_item .thumb{
   position:relative;
   height:90px;
   padding:2px;
   margin-bottom:4px;
   background:center center no-repeat;
   border:1px solid lightgrey;
   text-align:center;
   vertical-align:middle;
   cursor:hand;
  }
  .thumb_item .attrs{
   height:20px;
   line-height:20px;
   white-space:nowrap;
   overflow:hidden;
  }
  .thumb_item .attrs_selected{
   height:20px;
   line-height:20px;
   white-space:nowrap;
   overflow:hidden;
   background-color:#bef1c2;
  }
  .thumb_span{
   font-size:12px;
   font-family:"宋体";
   color:#013f06;/*#097f12*/
  }
  .thumb_image_a{
   text-decoration:none;
  }
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
//调整图片大小
function resizeIfNeed(_imgloaded){
  if(!_imgloaded){
   return;
  }
  var height = _imgloaded.height;
  var width = _imgloaded.width;
  if(height > 90 || width > 105){
   if(height > width){
    _imgloaded.height = 80;
    width = 80*width/height;
    height = 80;
    //对宽度进行再次处理
    if(width>97){
     width = 97;
    }
   }else{
    _imgloaded.width = 97;
    height = 97 * height/width;
    width = 97;
    //对高度进行再次处理
    if(height>80){
     height = 80;
    }
   }
  }
  _imgloaded.width = width;
  _imgloaded.height = height;
  _imgloaded.style.left = Math.floor((104-width)/2)+"px";
  _imgloaded.style.top = Math.floor((90-height)/2)+"px";
}

//缩放图片
function img_zoom(_nCurrIdNumber){
  var currImg = document.getElementById("div_img_" + _nCurrIdNumber);
  if(!currImg){
   return;
  }
  var zoom = parseInt(currImg.style.zoom, 10) || 100;
　　　　　　zoom += event.wheelDelta / 12;
　　　　　　if (zoom> 0){
   currImg.style.zoom = zoom + "%";
  }
　　　　　　return false;
}

//-->
</SCRIPT>

</HEAD>

</BODY>
</HTML>

二、点击图片，看看

产生的原因在于上边的红色部分，用a元素包含了div元素造成的。由于a元素是内联元素，div是块元素，内联元素是不可以包含块元素的，所以导致了上边的错误，只需要把a元素调整到div元素里面即可实现点击图片跳转，以后得注意使用了。调整后的代码，如下（粉红色部分为调整的）

</A>
</DIV>
</DIV>