防止使用 CSS 在母版页中移动窗口大小 asp.net div 块

调整浏览器窗口大小时，div 正在移动。图像可以是任何 gif/png 图像

母版页代码隐藏

protected void Page_Load(object sender, EventArgs e) 
    { 
        const string imageGreen = "~/App_Ressources/Images/traffic_light_green_small.png"; 
        HtmlGenericControl imgDiv = new HtmlGenericControl(); 
        HtmlImage imgGreen = new HtmlImage(); 
        imgGreen.Src = imageGreen; 
        imgDiv.Controls.Add(imgGreen); 
        HtmlGenericControl txtDiv = new HtmlGenericControl(); 
        txtDiv.Attributes.Add("style", "color:green;"); 
        StringBuilder sb = new StringBuilder(); 
        sb.Append("Feed name as of " + DateTime.Now.ToString("dd MMM yyyy HH:mm")); 
        sb.Append("<br/>"); 
        sb.Append("<br/>"); 
        txtDiv.InnerHtml = sb.ToString(); 
        imgDiv.Controls.Add(txtDiv); 
        Refeshbox.Controls.Add(imgDiv); 
    }

母版页

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head runat="server"> 
    <title></title> 
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> 
    </asp:ContentPlaceHolder> 
    <style type="text/css"> 
        .Refeshdiv 
        { 
            position: absolute; 
            top: 130px; 
            right: 400px; 
            width: 240px; 
            height: 244px; 
            padding: 10px; 
            color: green; 
            display: none; 
            border: 1px solid green; 
            z-index: 98001; 
            background-color: White; 
        } 
        .imgdivclass 
        { 
            position: absolute; 
            top: 56px; 
            right: 640px; 
            display: inline; 
            white-space: nowrap; 
            margin-left:0px; 
            margin-right:0px; 
        } 
        .anchordivclass 
        { 
            position: absolute; 
            top: 62px; 
            right: 530px; 
            text-align: right; 
            display: inline; 
            white-space: nowrap; 
            margin-left:0px; 
            margin-right:0px; 
        } 
        body 
        { 
            width: 100%; 
            background-color: white; 
        } 
    </style> 
</head> 
<body> 
    <form runat="server"> 
    <script type="text/javascript" language="javascript"> 
        function Show(id, visibility) { 
            var id = '<%=Refeshbox.ClientID%>'; 
            document.getElementById(id).style.display = visibility; 
        } 
    </script> 
    <div class="page"> 
        <div class="header"> 
            <div class="title"> 
                <h1> 
                    My ASP.NET Application 
                </h1> 
            </div> 
            <div class="loginDisplay"> 
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> 
                    <AnonymousTemplate> 
                        [ <a href="~/Account/Login.aspx" id="HeadLoginStatus" runat="server">Log In</a> 
                        ] 
                    </AnonymousTemplate> 
                    <LoggedInTemplate> 
                        Welcome <span class="bold"> 
                            <asp:LoginName ID="HeadLoginName" runat="server" /> 
                        </span>! [ 
                        <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" 
                            LogoutPageUrl="~/" /> 
                        ] 
                    </LoggedInTemplate> 
                </asp:LoginView> 
            </div> 
            <div class="clear hideSkiplink"> 
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" 
                    IncludeStyleBlock="false" Orientation="Horizontal"> 
                    <Items> 
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" /> 
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About" /> 
                    </Items> 
                </asp:Menu> 
            </div> 
        </div> 
        <div class="main"> 
            <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
            <%--<div id="divlink" class="adiv">--%> 
            <div id="imgdiv" class="imgdivclass"> 
                <img id="imgLights" src="App_Ressources/Images/traffic_light_green_small.png" height="29px" 
                    width="20px" alt="" /> 
            </div> 
            <div id="anchordiv" class="anchordivclass"> 
                <a href="" style="color: Black" onmouseover="Show('Refeshbox','block');" onmouseout="Show('Refeshbox','none');"> 
                    last updates info</a> 
            </div> 
            <%--</div>--%> 
            <div id="Refeshbox" class="Refeshdiv" runat="server"> 
            </div> 
        </div> 
        <div class="clear"> 
        </div> 
    </div> 
    <div class="footer"> 
    </div> 
    </form> 
</body> 
</html>

调整浏览器窗口大小时，div 将向左移动。问题出在下面的这些div 标签上。

        <div id="anchordiv" class="anchordivclass"> 
            <a href="" style="color: Black" onmouseover="Show('Refeshbox','block');" onmouseout="Show('Refeshbox','none');"> 
                last updates info</a> 
        </div>

任何帮助都非常感谢。

谢谢湿婆

看看你的anchordivclass CSS。你有那个类，有position: absolute，right: 530px .在这种情况下，div 将不会遵循正常布局。它将始终保持自己距离窗口右边缘 530 像素，因为没有指定位置的祖先元素。

.anchordivclass 
{ 
  position: absolute; 
  top: 62px; 
  right: 530px; 
  text-align: right; 
  display: inline; 
  white-space: nowrap; 
  margin-left:0px; 
  margin-right:0px; 
}

相关内容

最新更新

热门标签：