0

CSS 初心者のための 2 つ目のレイアウトに関する質問です。

サイト マスター ページの ASP.NET レイアウトに、生成された .Main div があります。「Show.aspx」という新しいページを追加し、これにいくつかの div を追加しました。私がやろうとしているのは、「Show.aspx」の説明divのサイズに基づいて「.main」divを拡張することです

追加するために、ソース サーバー側に「説明」div を追加しました。.main はサイト マスター CSS ページにあります。

問題を示すスクリーンショットは次のとおりです。

ここに画像の説明を入力

示されているように、白い .main div は展開されていません。overflow:auto を追加しようとしましたが、やはり役に立ちません。いくつかの調査の後、div で float スタイルを使用しているため、これが問題になる可能性がありますが、理由はわかりません。

コード：

サイトマスター .main:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

</head>
<body>
<form runat="server">
<div class="page">

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
    <div class="header">
        <div class="title">

            <h1>

             <img id="Img1" src = "Images/coffe pic.png" alt="" runat="server" />
                Coffee Stop

                </h1>
        </div>
        <div class="loginDisplay">
        </div>
        <div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem Text="Shop Online" Value="Shop Online"></asp:MenuItem>
                    <asp:MenuItem Text="Contact Us" Value="Contact Us"></asp:MenuItem>
                    <asp:MenuItem Text="About Us" Value="About Us"></asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
    </div>
    <div class="main">
        <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
    </div>
    <div class="clear">
    </div>
</div>
<div class="footer">

</div>
</form>
</body>
</html>

そして、私のサーバー側は Show.aspx ページの div を追加しました:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Show.aspx.cs" Inherits="ViewCDs.Show" %>


   <asp:FormView ID="FormView1" runat="server" Height="141px">
       <EditItemTemplate>
           coffeeName:
           <asp:TextBox ID="coffeeNameTextBox" runat="server" 
               Text='<%# Bind("coffeeName") %>' />
           <br />
           coffeeOrigin:
           <asp:TextBox ID="coffeeOriginTextBox" runat="server" 
               Text='<%# Bind("coffeeOrigin") %>' />
           <br />
           coffeeStrength:
           <asp:TextBox ID="coffeeStrengthTextBox" runat="server" 
               Text='<%# Bind("coffeeStrength") %>' />
           <br />
           coffeeGrind:
           <asp:TextBox ID="coffeeGrindTextBox" runat="server" 
               Text='<%# Bind("coffeeGrind") %>' />
           <br />
           coffeePrice:
           <asp:TextBox ID="coffeePriceTextBox" runat="server" 
               Text='<%# Bind("coffeePrice") %>' />
           <br />
           coffeeQty:
           <asp:TextBox ID="coffeeQtyTextBox" runat="server" 
               Text='<%# Bind("coffeeQty") %>' />
           <br />
           coffeeRRP:
           <asp:TextBox ID="coffeeRRPTextBox" runat="server" 
               Text='<%# Bind("coffeeRRP") %>' />
           <br />
           <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
               CommandName="Update" Text="Update" />
           &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" 
               CausesValidation="False" CommandName="Cancel" Text="Cancel" />
       </EditItemTemplate>
       <InsertItemTemplate>
           coffeeName:
           <asp:TextBox ID="coffeeNameTextBox" runat="server" 
               Text='<%# Bind("coffeeName") %>' />
           <br />
           coffeeOrigin:
           <asp:TextBox ID="coffeeOriginTextBox" runat="server" 
               Text='<%# Bind("coffeeOrigin") %>' />
           <br />
           coffeeStrength:
           <asp:TextBox ID="coffeeStrengthTextBox" runat="server" 
               Text='<%# Bind("coffeeStrength") %>' />
           <br />
           coffeeGrind:
           <asp:TextBox ID="coffeeGrindTextBox" runat="server" 
               Text='<%# Bind("coffeeGrind") %>' />
           <br />
           coffeePrice:
           <asp:TextBox ID="coffeePriceTextBox" runat="server" 
               Text='<%# Bind("coffeePrice") %>' />
           <br />
           coffeeQty:
           <asp:TextBox ID="coffeeQtyTextBox" runat="server" 
               Text='<%# Bind("coffeeQty") %>' />
           <br />
           coffeeRRP:
           <asp:TextBox ID="coffeeRRPTextBox" runat="server" 
               Text='<%# Bind("coffeeRRP") %>' />
           <br />
           <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" 
               CommandName="Insert" Text="Insert" />
           &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" 
               CausesValidation="False" CommandName="Cancel" Text="Cancel" />
       </InsertItemTemplate>
       <ItemTemplate>

           <b>Origin:</b>
           <asp:Label ID="coffeeOriginLabel" runat="server" 
               Text='<%# Bind("coffeeOrigin") %>' />
           <br />

           <b>Grind:</b>
           <asp:Label ID="coffeeGrindLabel" runat="server" 
               Text='<%# Bind("coffeeGrind") %>' />
           <br />

           <b>Price: £</b>
           <asp:Label ID="coffeePriceLabel" runat="server" 
               Text='<%# Bind("coffeePrice") %>' />
           <br />

               <b>Strength:</b>
           <asp:Label ID="coffeeStrengthLabel" runat="server" 
               Text='<%# Bind("coffeeStrength") %>' />
           <br />

           <b>Stock Level:</b>
           <asp:Label ID="coffeeQtyLabel" runat="server" Text='<%# Bind("coffeeQty") %>' />
           <br />


       </ItemTemplate>
   </asp:FormView>
   <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
       ConnectionString="<%$ ConnectionStrings:CoffeeConnectionString %>" 
       SelectCommand="SELECT [coffeeName], [coffeeOrigin], [coffeeStrength], [coffeeGrind], [coffeePrice], [coffeeQty], [coffeeRRP] FROM [Coffees]">
   </asp:SqlDataSource>

   <br />


ビーンズスムースコース 
  <div style=" float:left; width: 165px; height: 40px;">
  <br />
      <b><asp:Label ID="Label2" runat="server" Text="Quantity:"></asp:Label></b>
 </div>

  <div style=" float:right; width: 165px; height: 40px;">
   <br />

      <asp:TextBox ID="TextBox1" runat="server" Width="40px">1</asp:TextBox>

 </div>
     <div style=" float:left; width: 165px; height: 40px;">
     <br />

         <asp:Button ID="Button1" runat="server" Text="Buy" />

 </div>

 <div>

</div>
</div>

<br />
<br />

<div id = "titleDescrip" style="position:absolute; top:445px; font-size:20pt;" runat="server" > 

</div> 

<div id="divDescrip" style="position:absolute; top:480px; width:925px;" runat="server"> 

</div>

</asp:Content>
4

2 に答える 2

1

理解する必要があることがいくつかあります。

マスター ページと子ページの両方が、実行時に結合されて 1 つになります。

つまり、マスター ページに以下のコンテナーがあるとします。

<div class="main">
     <asp:ContentPlaceHolder id="mainContent" runat="server">
     </asp:ContentPlaceHolder">
</div>

子ページ、つまりShow.aspx、次のようなコンテナがあります

   <asp:Content id="mains" ContentPlaceHolderId="mainContent">
         <div class="pagecontent">
         </div>
         <div class="description">
         </div> 
   </asp:Content>

次に、実行時に次のようにレンダリングされます（もちろん、さらにいくつかのコンテナがあります）。

<div class="main">
    <div class="pagecontent">
    </div>
    <div class="description">
    </div>
</div>

第二に、あなたはposition:absoluteあなたの内部要素に使用しています。そうしないでください。

するとposition:absolute、ドキュメントの通常のフローからその要素を削除するため、大まかに言えば、親 div は、その絶対配置された子のサイズが何であるかを気にしません!!

このフィドルを参照してください。

メインには高さが定義されていないため、内部の div にどのような高さを指定しても、メインは常にそれに応じて拡張されます。したがって、その height:auto

于 2013-03-23T20:03:52.217 に答える
0

試す

.main

{

display:table-column;
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;

}

そしてdisplay：blockを追加します。子クラスへ

于 2013-03-23T20:29:17.253 に答える