1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.square
{
 width: 200px;
 height:200px;
 background-color:#F99; 
}

#myimage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.table
{
    position:relative;
    margin-top:80px;

}
</style>
<script>

cc=1;
function changeimage()
{
if (cc==0) 
  {
  cc=1;
  document.getElementById('myimage').src="images/white_contact.png";
  }
else if (cc==1)
  {
  cc=2;
  document.getElementById('myimage').src="images/yellow_contact.png";
  }
  else if (cc==2)
  {
  cc=3;
  document.getElementById('myimage').src="images/red_contact.png";
  }
    else
  {
  cc=0;
  document.getElementById('myimage').src="images/green_contact.png";
  }
}
</script>
</head> 

<body>
<div class = "square">
<table border="0" class = "table" ><tr>
<td width="51">Name:</td>
<td width="141"><input type="text" size="10"></td>
</tr>
<tr>
<td>Title:</td>
<td><input type="text" size="10"></td>
</tr>
<tr>
<td>Contact:</td>
<td><input type="text" size="10"></td>
</tr>
</table>
</div>
<img id="myimage" onclick="changeimage()" border="0" src="images/white_contact.png" width="70" />

<p>Click to turn on/off the light</p>

</body>
</html>

这是我的代码，我想将我的表格放在粉色盒子的底部，这样它就不会被图像挡住，无论我多么努力地调整我的 CSS，它似乎都在底部

我应该怎么办？帮我。

4

3 回答 3

0 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.square
{
 width: 200px;
 height:200px;
 background-color:#F99; 
 position: absolute;
}

#myimage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.table
{
    bottom: 0;
    position: absolute;
    margin-top:80px;

}
</style>
<script>

cc=1;
function changeimage()
{
if (cc==0) 
  {
  cc=1;
  document.getElementById('myimage').src="images/white_contact.png";
  }
else if (cc==1)
  {
  cc=2;
  document.getElementById('myimage').src="images/yellow_contact.png";
  }
  else if (cc==2)
  {
  cc=3;
  document.getElementById('myimage').src="images/red_contact.png";
  }
    else
  {
  cc=0;
  document.getElementById('myimage').src="images/green_contact.png";
  }
}
</script>
</head> 

<body>
<div class = "square">
<table border="0" class = "table" ><tr>
<td width="51">Name:</td>
<td width="141"><input type="text" size="10"></td>
</tr>
<tr>
<td>Title:</td>
<td><input type="text" size="10"></td>
</tr>
<tr>
<td>Contact:</td>
<td><input type="text" size="10"></td>
</tr>
</table>
</div>
<img id="myimage" onclick="changeimage()" border="0" src="images/white_contact.png" width="70" />

<p>Click to turn on/off the light</p>

</body>
</html>
于 2013-06-02T10:10:04.033 回答
0

以下规则应允许您将所有元素垂直对齐到其父元素的底部...

.parent {
    display: table-row;
}

.child {
    display: table-cell;
    vertical-align: bottom;
}

您正在寻找的规则是vertical-align: bottom. display奇怪的是，这在其父元素具有block类似元素的元素中不起作用<div>。因此，您需要将其设置为允许垂直对齐的任何设置，例如table

于 2013-06-02T11:44:26.507 回答
0

使用这些特定属性更新文件的以下现有类。

 .square {
    width: 200px;
    height: 200px;
    background-color: #F99;
    display: table-row;
 }

 .table {
    vertical-align: bottom;
    display: table-cell;
 }
于 2013-06-02T10:21:21.107 回答