Question

我有一个应该显示日历的HTML页面。有一个图像要显示在日历上方。一个在下面。但下面的（id = bottomCell）显示不正确（右侧不在下方）。

你能告诉我如何让底部照片处于正确的位置来帮助我吗？

请找我的html＆amp; png在这里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>

Answer 1

您使用底部图像的方式，我会尝试将其设为显示块：

#bottomCell {display:block;}

这将覆盖默认的inline-block，这可能导致明显的包装行为。

Answer 2

@mack

在你的container div中有三个浮动元素＆amp;你没有清楚它。所以，首先明确它

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

HTML日历：底部图像显示在右侧而不是底部

2 个答案: