HTML日曆：底部圖像顯示在右邊不在底部

我有一個HTML頁面應該顯示日曆。有一張圖像意在顯示在日曆&之上。但是下面的一個（id = bottomCell）顯示不正確（在右下方）。HTML日曆：底部圖像顯示在右邊不在底部

你能幫助我告訴我如何讓底部圖片處於正確的位置嗎？

請找我的HTML &巴新在這裏http://www.mediafire.com/?bcddcen1tdc2urr以便您可以查看什麼不順心與圖像&如何其顯示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" --> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <script type="text/javascript" src="dropDownMenu.js"></script> 

    <style type="text/css" media="all"> 
     <!-- 

     html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: center; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; } 

     a:link, a:hover, a:visited, a:active { width: 100%; height: 100%; } 

     #container {position: relative; background-color: #BCC5C5; } 
     #calendar { float: left; background-color: #BCC5C5; width: 435px; } 
     #calendar th { position: relative; } 
     #topCell {} 
     #bottomCell { } 
     #leftButton { float: left; position: relative; 
     #rightButton { float: left; position: relative; } 

     --> 
    </style> 
</head> 

<body> 

    <div> 
     <img id="topCell" src="../Images/topTableCell.png" alt="" width="500px" height="50px"/> 
     <div id="container"> 
      <a id="leftButton" ><img src="../Images/leftButton.png" height="30px" width="30px" alt=""/></a> 
      <table id="calendar"> 
       <th colspan=7> abcd </th> 
       <tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr> 
       <tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr> 
       <tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr> 
       <tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr> 
       <tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr> 
       <tr> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> <td>abcd</td> </tr> 
      </table> 
      <a id="rightButton" ><img src="../Images/rightButton.png" height="30px" width="30px" alt=""/></a> 
     </div> 
     <img id="bottomCell" src="../Images/bottomTableCell.png" alt="" width="500px" height="30px"/> 
    </div> 

</body> 
<!-- InstanceEnd --> 
</html>

來源

2011-03-30 Mack

@mack

在你container DIV有&你沒有明確的三項浮動元素。所以，首先清除它

#container {position: relative; background-color: #BCC5C5; overflow:hidden; width:500px;}

來源

2011-03-30 05:23:36 sandeep

您使用的是底部圖像的方式，我會嘗試使其顯示塊：

#bottomCell {display:block;}

這將覆蓋默認inline-block，這可能會導致明顯的包裝行爲。

來源

2011-03-30 04:46:00 Shad

HTML日曆：底部圖像顯示在右邊不在底部

回答

相關問題