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

最新推荐文章于 2022-08-05 16:56:29 发布

最新推荐文章于 2022-08-05 16:56:29 发布 · 238 阅读

文章标签：

#HTML #脚本 #Windows

javascript&DHTML&CSS 专栏收录该内容

12 篇文章

订阅专栏

本文分析了一个HTML页面中元素定位出现问题的原因，并提供了相应的解决方案。详细解释了如何通过调整CSS属性来修正元素的位置，确保它们正确地显示在表格内。

一、请看下面的HTML代码

<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)的大小都是一样的。