Как разместить 2 календаря рядом друг с другом, а не под собой? - PullRequest
Новая
       3

Как разместить 2 календаря рядом друг с другом, а не под собой?

3 голосов
/ 06 сентября 2011

Я хочу расположить календари рядом друг с другом, а не под собой, но при попытке перетащить календари они не перемещаются. У кого-нибудь есть идеи, что я могу сделать, если это возможно. Спасибо

Это мой код (я использую 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

Ответы [ 5 ]

4 голосов
/ 06 сентября 2011

Причина, по которой календари отображаются в вертикальном порядке, заключается в том, что в визуализированной разметке ASP.NET используется <table>, который по умолчанию является блочным элементом (некоторые дополнительные сведения о макете элемента доступны здесь и здесь ). Есть два способа приблизиться к этому:

  1. Сделать элемент не использовать блочную разметку. Вы можете переопределить это, используя свойство 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>

  2. Оберните содержащий элемент, содержащий эти элементы управления календаря, позиционированием так, чтобы они выровнялись. Пример этого см. В ответе Райана Саммута.

3 голосов
/ 06 сентября 2011

Вставьте свои даты в 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>
1 голос
/ 06 сентября 2011

Используйте таблицу и расположите два каландра в один ряд в два столбца.

0 голосов
/ 01 июля 2014

ЭТОТ КОД !!! 

   <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>
0 голосов
/ 01 июля 2014

Попробуйте этот код для регулировки с левой позиции: 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...