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

次のルールにより、すべての要素を親の下部に垂直に揃えることができます...

.parent {
    display: table-row;
}

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

お探しのルールは ですvertical-align: bottom。奇妙なことに、親が要素のようなdisplayof を持つ要素では機能しません。したがって、垂直方向の配置を許可する設定に設定する必要があります。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 に答える
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 に答える