问题描述:

<!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>

This is my code, I want to position my Table on the BOTTOM of my pink box, so that it would not be block by the image, no matter how hard I try to adjust my CSS, it seem to be at the bottom

what should I do? help me

网友答案:
<!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>
网友答案:

Update the following existing classes of your file with these specific properties.

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

 .table {
    vertical-align: bottom;
    display: table-cell;
 }
网友答案:

The following rules should allow you to vertically align all elements to the bottom of their parent...

.parent {
    display: table-row;
}

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

The rule you are looking for is vertical-align: bottom. Strangely that doesn't work in elements whose parents have a display of block like the <div> element. So you need to set it to any settings that allow vertical alignment, like table

相关阅读:
Top