Question

我设计了一个下拉日历，但如果我点击图片显示下拉日历，我就无法看到，在文本框下方。如何在文本框正下方显示此日历：

<table width=100%>
  <tr align=center>
    <td align=center>
      <asp:Panel ID="Panel2" runat="server" GroupingText="Suche" >
        <table width=100%>
          <tr align=center>
            <td align=center>
              <asp:Label ID="Label4" runat="server" Text="Von :"></asp:Label>
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
              <img id="Calimg1" src="Images/cal.jpg" onclick="selectdate()" />
              <div id="calblock1" class=calander >
                <asp:Calendar OnSelectionChanged="Calendar1_SelectionChanged"
                              ID="Calendar1" runat="server" BackColor="#FFFFCC" 
                              BorderColor="#FFCC66" BorderWidth="1px"
                              DayNameFormat="Shortest" Font-Names="Verdana"
                              Font-Size="8pt" ForeColor="#663399" Height="200px" 
                              ShowGridLines="True" Width="220px">
                  <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True"
                                  Height="1px" />
                  <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                  <OtherMonthDayStyle ForeColor="#CC9966" />
                  <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                  <SelectorStyle BackColor="#FFCC66" />
                  <TitleStyle BackColor="#990000" Font-Bold="True"
                              Font-Size="9pt" ForeColor="#FFFFCC" />
                  <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                </asp:Calendar>
              </div>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                                          runat="server" 
                                          ControlToValidate="TextBox1"
                                          ErrorMessage="*" ForeColor="Red">
              </asp:RequiredFieldValidator>
            </td>
          </tr>
......

CSS：

.calander
{
    display:none;
    position:absolute
}

和我使用的JavaScript：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Calimg1').click(function () {
            if (isAnyVisible()) return false;
            $('#calblock1').slideToggle("slow");
        });

        $('#Img1').click(function () {
            if (isAnyVisible()) return false;
            $('#Div2').slideToggle("slow");
        });
    });

    function isAnyVisible() {
        if ($('#Calimg1').is(':visible') || $('#Img1').is(':visible')) {
            return false;
        }
        return true;
    }

Answer 1

您已指定position为absolute，这是正确的曲目。但是，你遗漏了一些东西。

首先，绝对元素的父元素应该有position:relative。没有该相对父级，当您指定top和left时，它将相对于整个文档。如果您使用的坐标相对于容器，则更容易使用。

接下来，嵌套表格太可怕了。使用div，消除一些容器。 CSS定位，浮点数，边距和填充将实现相同的结果。

<强>机制的文档

来自MDN的CSS position - https://developer.mozilla.org/en/CSS/position
有关CSS定位的文章 - http://www.alistapart.com/articles/css-positioning-101/
停止使用表格进行布局@ Stack Overflow - Why not use tables for layout in HTML?

Answer 2

如果您拥有2012年或更高版本，可以使用原生.Net 工具。使用任何文本框，然后转到属性并将 TextMode 更改为 DateTimeLocal 。这将创建一个非常好的下拉日历。注意：如果您的IE太旧，则无法显示日历，因此请尝试在Chrome和Firefox上进行调试。

在文本框正下方显示日历

2 个答案: