Question

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

如果我像这样对

这样的样式进行硬编码，代码就有效

<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;}

Answer 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>

Answer 2

我认为在您的元素上设置宽度非常重要，您可能会丢失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/

与DIV并排的ASPX母版页

2 个答案: