2

助けが必要。マスター ページの子 .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;}
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: hiddenpagemiddle

#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 に答える