我在ASP.NET网站上显示元素时遇到了一些问题。我正在尝试创建一个简单的聊天应用程序。如果您查看,请参阅下面的.aspx
代码,您会看到我的UpdatePanel
内有一个部分。本节包含四个div。现在,我的工作几乎没问题。我的意思是,最后<div>
不应该真正进入UpdatePanel
,因为它会使每个帖子都刷新<asp:TextBox>
,我需要使用一些javascript将光标移动到结束了。但它很烦人,不能像我想的那样工作:
<form id="form1" runat="server" defaultbutton="btnSend" defaultfocus="tBox">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Timer runat="server" ID="updateTimer" OnTick="updateTimer_Tick" Interval="3000"></asp:Timer>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="updateTimer"/>
</Triggers>
<ContentTemplate>
<section>
<div style="background-color:plum;text-align:center;" runat="server">
<asp:Label ID="lblWelcome" runat="server" Text="Czat rodzinny :)"></asp:Label>
</div>
<div id="one" style="overflow-y:scroll;">
<asp:Literal runat="server" ID="litMessages"></asp:Literal>
</div>
<div id="two" style="overflow-y:scroll";>
<asp:Literal runat="server" ID="litUsers"></asp:Literal>
</div>
<div>
<asp:TextBox runat="server" ID="tBox" Width="70%"></asp:TextBox>
<ajaxToolkit:FilteredTextBoxExtender runat="server" FilterType="Custom" InvalidChars="><" FilterMode="InvalidChars" TargetControlID="tBox"/>
<asp:Button runat="server" Text="Wyślij" Width="5%" ID="btnSend" OnClick="btnSend_Click"/>
<asp:Label runat="server" Width="4%">Kolor:</asp:Label>
<asp:DropDownList ID="ddlColors" runat="server" Width="13%" ></asp:DropDownList>
<asp:Button runat="server" Text="Wyloguj" Width="6%" />
</div>
</section>
</ContentTemplate>
</asp:UpdatePanel>
</form>
所以,我想移动这个<div> to be after
UpdatePanel`。但是当我这样做时,它会显示如下图所示:
所以,正如你所看到的,它没有显示在下面,但它覆盖了<section>
,我不知道为什么。下面是CSS:
section{
width: 100%;
height: 80vh;
background: aqua;
display:table;
}
div#one {
width: 80%;
height: 100%;
background-color:white;
border-style:solid;
border-width:5px;
border-color:brown;
float: left;
box-sizing:border-box;
}
div#two {
width: 20%;
height: 100%;
background-color:white;
border-style:solid;
border-width:5px;
border-color:brown;
float: left;
box-sizing:border-box;
}
#tBox{
vertical-align:bottom;
}
.text, .image, .block {display:table-cell;}
div, img { vertical-align:middle;}
我做错了什么?任何提示将不胜感激。