0

ドロップダウン カレンダーをデザインしましたが、イメージをクリックしてドロップダウン カレンダーを表示すると、テキスト ボックスの下に表示されません。このカレンダーをテキストボックスの真下に表示するにはどうすればよいですか:

<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;
    }
4

2 に答える 2

4

positionが であると指定しましたabsolute。これが正しいトラックです。ただし、いくつかのことが欠けています。

まず、絶対要素の親にはposition:relative. その相対的な親がなければ、 a を指定するtopと、leftそれはドキュメント全体に対して相対的になります。使用している座標がコンテナーに対して相対的である場合、作業がはるかに簡単になります。

次に、ネストされたテーブルは恐ろしいものです。div を使用し、それらのコンテナーの一部を削除します。CSS の配置、フロート、マージン、およびパディングでも同じ結果が得られます。

ドキュメンテーション

于 2012-06-21T06:50:34.367 に答える