与 DIV 并排的 ASPX 母版页答案

【问题标题】：ASPX Master Pages with DIV to be side by side与 DIV 并排的 ASPX 母版页
【发布时间】：2012-10-09 19:01:52
【问题描述】：

需要帮助。我无法弄清楚为什么我不能将 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;}

【问题讨论】：

你能显示渲染的代码吗，你确定css已经加载了吗？你有这个在线吗？
你确定css已经加载了吗？
我没有在线。除了 contentplaceholder 部分中的 DIV 之外，样式看起来还可以。
各位，谢谢你们的帮助。我只是想强调一下，如果我要使用 DIV 标记和 CSS 文件制作一个简单的 HTML 页面。我没有任何问题。只有当我使用 Visual Studio 并使用母版页时才会出现此问题
我注意到了一些有趣的事情。当我尝试使用 Chrome 并使用 Inspect Element 时。它显示内容页面中的所有 DIV 标记都不匹配任何 CSS 样式表元素。

标签： asp.net css html master

【解决方案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>

【讨论】：

有什么理由将page-left、right、middle改为class而不是ID？
这背后没有任何理由。我更改了 id 并相应地修改了 css。复制并粘贴到 html 文件中并检查。它对我有用！
您在使用母版页吗？我尝试不使用母版页，并且有效。只有当我使用母版页时，这件事才会失败。
用母版页代码更新了我的 html。这个对我有用。试试那个布局
是的，我尝试过这种方式并且它有效。谢谢你。我想弄清楚为什么带有 ID 或 CLASS 的 DIV 在内容页面中不起作用。我的意思是稍后，我可能需要创建其他需要在这些 ContentPlaceHolders 中流动的 DIV，我会再次遇到同样的问题。

【解决方案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 标记和 CSS 文件制作一个简单的 HTML 页面。我没有任何问题。只有当我使用 Visual Studio 并使用母版页时才会出现此问题。