Question

我有一个网页，其中标题是在用户控件中定义的。（我使用w3css作为我的框架。）我将用户控件放在另一个页面中。我把它包装在带有 w3-cell-row 类的div标签中。然后我的主要内容下面有另一个div。它还包含在带有 w3-cell-row 类的div标签中。问题是主div不在标题div下堆叠。它在标题下滑动。它与标题是用户控件有什么关系吗？我错过了什么？请参阅下面的代码和下面的截图。

我的标题控件：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Header.ascx.cs" Inherits="Header.controls.Header" %>
<%@ Register assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>

<link rel="stylesheet" type="text/css" href="css/w3.css" />
<style type="text/css">
    html, body {
        margin:0; padding:0
    }

</style>



<%--Large Screens--%>
<div class="w3-hide-small" style="width:100%; margin:0px; position:fixed; top:0; background-color:white;">

    <div class="w3-cell-row">
        <div class="w3-cell" style="display: inline-block; float:left; height:25px;">
            <asp:Image ID="Image1" runat="server" ImageUrl="~\images\Header.png" />
        </div>

        <div class="w3-cell" style="text-align: right; vertical-align: top; border: none; background-color:white; display: inline-block; float:right;">
            &nbsp;<asp:Label CssClass="w3-hide-medium" ID="lblLogin" runat="server" Font-Bold="true" Font-Size="10pt" ForeColor="#1F51A0" Font-Names="Arial">Welcome User</asp:Label>
            &nbsp;<span style="color: white; font-weight: bold">|</span>&nbsp;
                <asp:Label CssClass="w3-hide-medium" ID="lblLastLoginDate" runat="server" Font-Bold="true" Font-Size="10pt" Font-Names="Arial"
                    ForeColor="#1F51A0">Last Login</asp:Label>
            &nbsp;<span style="color: white; font-weight: bold">|</span>&nbsp;
                <asp:LinkButton ID="lbLogout" runat="server" CausesValidation="False" Font-Size="10pt" Font-Names="Arial"
                    Font-Underline="False" ForeColor="#1F51A0" OnClick="lbLogout_Click" Font-Bold="true">Logout &nbsp;</asp:LinkButton>
        </div>
    </div>

        <div class="w3-cell-row" style="text-align:right; vertical-align:bottom; background-color:#2c4182">

            <dx:ASPxMenu ID="ASPxMenu1" runat="server" Font-Bold="False" ForeColor="White" GutterWidth="0px" Paddings-Padding="0" BackColor="#2c4182" AppearAfter="0">

                <Paddings Padding="0px" />
                <ItemStyle>
                    <SelectedStyle BackColor="#3366CC" Border-BorderStyle="None" Border-BorderWidth="0" Font-Bold="True">
                    </SelectedStyle>
                    <HoverStyle BackColor="#3366CC"></HoverStyle>
                </ItemStyle>
                <SubMenuItemStyle BackColor="#2c4182" >

                    <HoverStyle BackColor="#3366CC">
                    </HoverStyle>

                </SubMenuItemStyle>
                <SubMenuStyle GutterWidth="0px" />
                <Border BorderStyle="None" />
            </dx:ASPxMenu>
        </div>
    </div>

   <%-- Small Screens--%>
<div class="w3-hide-medium w3-hide-large w3-cell-row">
    <div style="text-align: left; vertical-align: bottom; background-color: #2c4182;">

            <dx:ASPxMenu ID="ASPxMenu2" runat="server" Orientation="Vertical" Font-Bold="False" ForeColor="White" GutterWidth="0px" Paddings-Padding="0" BackColor="#2C4182" AppearAfter="0">

                <ClientSideEvents CloseUp="function(s, e) {
ASPxMenu2.SetSelectionItem(null);
}" />

                <Paddings Padding="0px" />
                <ItemStyle>
                    <SelectedStyle Border-BorderStyle="None" Border-BorderWidth="0" Font-Bold="True">
                    </SelectedStyle>
                    <HoverStyle BackColor="#3366CC"></HoverStyle>
                </ItemStyle>
                <SubMenuItemStyle BackColor="#2c4182">

                    <HoverStyle BackColor="#3366CC">
                    </HoverStyle>

                </SubMenuItemStyle>
                <SubMenuStyle GutterWidth="0px" />
                <Border BorderStyle="None" />
            </dx:ASPxMenu>
        </div>
</div>

我的网页：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Homepage.aspx.cs" Inherits="Website.Homepage" %>

<%@ Register Src="Controls/Header.ascx" TagName="Header" TagPrefix="uc1" %>
<%@ Register Src="Controls/Footer.ascx" TagName="Footer" TagPrefix="uc2" %>

<%@ Register Assembly="DevExpress.Web.v16.1, Version=16.1.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <link rel="stylesheet" type="text/css" href="css/w3.css" />
    <title>Home</title>
    <style>
        .newStyle1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: medium;
            font-weight: bold;
        }

        .ChartHeaders {
            font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
            font-size: small;
            font-weight: bold;
        }

        .auto-style2 {
            text-align: center;
            font-size: xx-large;
            color: #C0C0C0;
        }

        html, body {
            padding: 0;
            margin: 0;
        }

        html {
            height: 100%;
        }

        body {
            min-height: 100%;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <%--Header--%>
        <div class="w3-cell-row w3-mobile">
            <div class="w3-cell w3-col s12 m12 l12">
                <uc1:Header ID="Header1" runat="server" />
            </div>
        </div>


        <%--Main--%>
        <div class="w3-cell-row w3-mobile">
            <%--Left Side Bar--%>
            <div class="w3-cell w3-col l2 m2 s12" id="SideBar">
                <%--Message Center--%>
                <dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" ShowCollapseButton="true" Width="100%" Height="50%" HeaderText="Message Center">

                    <PanelCollection>
                        <dx:PanelContent runat="server"><span style="font-size: large">This is where you can display messages to the field.</span></dx:PanelContent>
                    </PanelCollection>

                </dx:ASPxRoundPanel>

                <%--Schedule--%>
                <dx:ASPxRoundPanel ID="ASPxRoundPanel3" runat="server" ShowCollapseButton="true" Width="100%" Height="50%" HeaderText="Upcoming Events">

                    <PanelCollection>
                        <dx:PanelContent runat="server"><span style="font-size: large">This will display upcoming events, deadlines, etc.</span></dx:PanelContent>
                    </PanelCollection>

                </dx:ASPxRoundPanel>

            </div>

            <%--Main Dashboard--%>
            <div class="w3-cell w3-col s12 m10 l10 w3-mobile" id="Dashboard">

                <dx:ASPxRoundPanel ID="ASPxRoundPanel2" runat="server" ShowCollapseButton="false" ShowHeader="false" Width="100%" Height="100%">
                    <PanelCollection>
                        <dx:PanelContent runat="server">
                            <div class="auto-style2">
                                Dashboard
                            </div>
                        </dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxRoundPanel>

            </div>
        </div>

        <%--Footer--%>
        <div class="w3-cell-row">
            <uc2:Footer ID="Footer" runat="server" />
        </div>
    </form>
</body>
</html>

Screenshot showing problem I'm having

Answer 1

您需要使用<div class="w3-container">分隔每个组件。由于w3css适用于容器，因此如果您不区分导航栏和即将发生的事件div在不同容器中，则浏览器会将它们全部分组到同一容器中，因此它们将相互重叠。

w3css单元格行重叠

1 个答案: