如何將兩個日曆相鄰而不是彼此放在一起？

我希望將日曆放在彼此相鄰的位置，而不是放在彼此的下面，但是當試圖拖動它們不移動的日曆時。有沒有人知道我可以做什麼，如果可能的話。由於如何將兩個日曆相鄰而不是彼此放在一起？

這是我的代碼（我使用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>

calendar positions

來源

2011-09-06 mikespiteri

將您的日期插入到div中，並將div的樣式賦予您想要的位置。速寫我做到了，它工作得很好：

<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>

來源

2011-09-06 06:18:46

非常感謝你的伴侶。它完美的工作 – mikespiteri

@mikespiteri - 很高興它的作品夥伴 –

.inline {display：inline; }風格使得這很簡單。感謝問問題mickespiteri – Sagotharan

使用Table，並安排在一個單排兩個壓光機在兩列。

來源

2011-09-06 06:16:50

日曆出現在垂直順序的原因是因爲所呈現的ASP.NET標記使用<table>，默認情況下是塊元素（約合一些更多的信息元素佈局可用here和here）。有兩種方法可以解決這個問題：

使元素不使用塊佈局。您可以使用CSS屬性display:inline;，例如：

<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>

裹含定位使得它們將排隊這些日曆控件包含的元素覆蓋。有關這方面的一個例子，請參閱Ryan Sammut的答案。

來源

2011-09-06 15:35:42 Jimmy

謝謝吉米。與選定的答案相比，它很容易修復。 – Sagotharan

試試這個代碼與左邊的位置進行調整：

<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>

來源

2014-07-01 15:31:04

此代碼！

<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>

來源

2014-07-01 15:41:59

歡迎來到SO並感謝您的幫助。只是代碼的答案被認爲是低質量的。如果你能解釋你的答案如何幫助解決OP的問題，它會對我們有所幫助。 –

如何將兩個日曆相鄰而不是彼此放在一起？

回答

相關問題