How can I position 2 calendars next to each other instead of under each other?_问答_开发者

How can I position 2 calendars next to each other instead of under each other?

开发者 https://www.devze.com 2023-04-02 11:21 出处：网络

I wish to position the calendars next to each other instead of under each 开发者_如何学Cother but when trying to drag the calendars they are not moving. Does anyone have any idea what can I do if it i

This is my code( i am using visual studio 2010)

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication9.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    <p>
    </p>
</asp:Content>

How can I position 2 calendars next to each other instead of under each other?

The reason the calendars appear in vertical order is because the rendered ASP.NET markup uses a <table>, which by default is a block element (some more info about element layout available here and here). There are two ways to approach this:

Make the element not use block layout. You can override this using the CSS property display:inline;, e.g.:

<head runat="server">
<style type="text/css">
    .inline{ display: inline; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:Calendar ID="Calendar1" runat="server" CssClass="inline" />
    <asp:Calendar ID="Calendar2" runat="server" CssClass="inline" />
</div>
</form>

Wrap the containing element containing these calendar controls with positioning such that they will line up. For an example of this, refer to Ryan Sammut's answer.

Insert your dates into a div, and style that div to give it the position you want. A quick sketch I did, and it works nicely:

<div id="date1"> 
    <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar>
</div>
<div id="date2" style="position: relative; left: 300px; margin-top: -163px;">
    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</div>

Use a Table and arrange the two calenders in a single row in two columns.

THIS CODE!!!

   <div id="date1" style="position: absolute; left: 370px; ">
                   <asp:calendar id="Calendar1" runat="server" Visible="true" > 

  </asp:calendar>
 </div>

 <div id="date2" style="position: absolute; left: 100px; ">
    <asp:calendar id="Calendar2" runat="server" Visible="true">  

  </asp:calendar>
  </div>

Try this code to adjust with left position:

<div id="date1" style="position: absolute; left: 370px; margin-top:;">
    <asp:calendar id="Calendar1" runat="server" Visible="true" >/asp:calendar>
</div>

<div id="date2" style="position: absolute; left: 100px;">
    <asp:calendar id="Calendar1" runat="server" Visible="true" >          
    </asp:calendar>
</div>