2

需要帮忙。我无法弄清楚为什么我不能将 div 并排放置在母版页的子 .aspx 中。

如果我像这样对样式进行硬编码，则代码有效

<div id="pagemiddleleft" style="float:left;">

但是当我将样式移动到 CSS 文件中时，div 拒绝并排放置。

下面是子代码

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master"
AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="pagetop">
</div>
<div id="pagemiddle">
        <div id="pagemiddleleft">111111
        </div>
        <div id="pagemiddlecenter">111111
        </div>
        <div id="pagemiddleright">111111
        </div>
        <div style="clear: both"></div>
</div>
<div id="pagebottom">
</div>
</asp:Content>

以下是母版页的摘录

 <div class="page">
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
 </div>

下面是子 aspx 页面的 CSS 部分

#pagemiddleleft {
float: left; background-color: #FFFF00;}

#pagemiddlecenter {
float: left; background-color: #00FFFF;}

#pagemiddleright {
float: right; background-color: #FF00FF;}
4

2 回答 2

1

试试这个母版页布局

母版页

    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <asp:ContentPlaceHolder ID="head" runat="server">

        </asp:ContentPlaceHolder>
        <style type="text/css">
        div.page
        {
            float: left;
            width: 100%;
            background:#ffc;
        }
        div#main
        {
            float: left;
            clear: both;
            width: 100%;
            position: relative;
        }
        div#page-left
        {
            float: left;
            width: 20%;
            background:orange;
        }
        div#page-right
        {
            float: right;
            width: 20%;
            background:green;
        }
        div#page-middle
        {
            float: left;
            margin: 0 auto;
            width: 60%;
            background:blue;
        }
    </style>
    </head>
    <body>
        <div class="page">
            <div id="main">
                <form id="form1" runat="server">
                <div id="page-left">
                   <asp:ContentPlaceHolder ID="leftContent" runat="server"></asp:ContentPlaceHolder>
                </div>
                <div id="page-middle">
                    <asp:ContentPlaceHolder ID="middleContent" runat="server"></asp:ContentPlaceHolder>
                </div>
                <div id="page-right">
                 <asp:ContentPlaceHolder ID="rightContent" runat="server"></asp:ContentPlaceHolder>
                </div>
                </form>
            </div>
        </div>
    </body>
    </html>

内容页

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" MasterPageFile="~/MasterPage.master"
        Inherits="_Default" %>

    <asp:Content ContentPlaceHolderID="leftContent" runat="server" ID="PageLeft">
        Page Left Contentt</asp:Content>
    <asp:Content ContentPlaceHolderID="middleContent" runat="server" ID="PageMiddle">
        Page Middle Content</asp:Content>
    <asp:Content ContentPlaceHolderID="rightContent" runat="server" ID="PageRight">
        Page Right Content</asp:Content>
于 2012-10-19T07:51:18.340 回答
0

我认为在你的元素上设置宽度很重要，你可能会失去并clear: both <div>只是穿上overflow: hidden. pagemiddle（高度不需要，我只是把它放在那里更好地说明我的答案）

#pagemiddle { overflow: hidden; width: 500px; }
#pagemiddleleft { float: left; background-color: #FFFF00; width: 100px; height: 100px; }
#pagemiddlecenter { float: left; background-color: #00FFFF; width: 300px; height: 100px; }
#pagemiddleright { float: right; background-color: #FF00FF; width: 100px; height: 100px; }​

演示- http://jsfiddle.net/8NH8t/

于 2012-10-19T08:29:09.390 回答