利用div进行页面的布局2(position属性)

一、请看下面的HTML代码

 1 < HTML >
 2 < HEAD >
 3 < TITLE > Position  </ TITLE >
 4 </ HEAD >
 5 < BODY >
 6 < table  border =1 >
 7      < tr >
 8          < td  >
 9              < textarea  id ="textareaInput"  style ="font-family: Tahoma; font-size: 11px;"  cols ="35"  rows ="3" /></ textarea >
10          </ td >
11          < td  width ='300'  align ='right'  >
12              < DIV  id =senddiv   style ="WIDTH: 70px; HEIGHT: 41px;" >
13                  < IMG  id =btnSendOut  style ="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px"  src ="windows_button_bg.gif" >
14                  < div  id =divSendOut  style ="WIDTH: 70px; POSITION: absolute; HEIGHT: 41px;line-height:41px"  align ='center'  > Send </ div >
15              </ DIV >
16          </ td >
17      </ tr >
18 </ table >
19 </ div >
20 </ BODY >
21 </ HTML >

二、运行的结果

 三、问题
     为什么img(id为btnSendOut)和文字div(id为divSendOut)出现在table外了呢？
四、原因
    img和文字div都用的绝对(position:absolute)位置,但都没有设置left和top属性，这样会根据当前的HTML位置来确定left和top属性。上级容器是个div(id为senddiv)中，此div延续上级td的align属性，这样当前位置应在div的右边。于是img和文字div从div（id为senddiv)的右边开始显示，由于都是绝对的，脱离HTML的显示，所以都会超出table外。
五、解决方案
      找到了原因，解决起来就容易了。我们只需要把div(id为senddiv)的align属性设置为left就可以了。因为img，div(id为divSendOut)，div(id为senddiv)的大小都是一样的。

六、另外的问题(层的居中问题)
      对于把字符串"Send"居中在div(id为divSendOut)中间，我们可以设置div的line-height属性(注意该属性的单位)和height属性一样就可以了。但是如果需要居中的不是文字，而且其它的对象，例如另一个div，则就需要利用脚本来控制了。