2011-12-17 154 views
0

我想堆疊#Direction Div在另外兩個Div #Ratedpics和#Mainpics之上。我希望他們以對方爲中心。此外,當頁面調整大小時,我希望它們按比例移動頁面。這可能嗎?在Css中堆疊Divs

額定圖片和主要圖片需要並排。方向需要集中在最上面。

div#MainPics 
    { 
     height: 650px; 
     width: 60%; 
     -moz-border-radius: 35px; 
     border-radius: 35px; 
     background-color: Black; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    #ratedpic 
    { 
     position: relative; 
     float: left; 
     width: 22%; 
    } 
    div#Direction 
    { 
     width: 20%; 
     margin-left: auto; 
     margin-right: auto; 
    } 



<div id="Direction"> 
    <asp:Label ID="Label1" runat="server" Text="Here i want my directions centered on top of main pics" Font-Size="Large" 
     Width="270" Font-Bold="True" ForeColor="#1B0358"></asp:Label> 

</div> 
<div id="ratedpic"> 
    <p> 
     <asp:Label ID="RatedPicnameLabel" runat="server" Text=""></asp:Label> 
    </p> 
    <asp:ImageButton ID="RatedImage" Width="70%" runat="server" /><br /> 
    <asp:Label ID="RatedPicRating" runat="server" Text=""></asp:Label><br /> 
</div> 
<div id="MainPics"> 
    <div id="RightPic"> 
     <p> 
      <asp:Label ID="FirstPicMemberNameLabel" runat="server" Text="" Font-Bold="True" ForeColor="White"></asp:Label> 
     </p> 
     <asp:ImageButton ID="FirstPicLink" Width="90%" runat="server" /> 

    </div> 
    <div id="LeftPic"> 
     <p> 
      <asp:Label ID="SecondPicMemberNameLabel" runat="server" Text="" ForeColor="White" Font-Bold="True"></asp:Label> 
     </p> 
     <asp:ImageButton ID="SecondPicLink" Width="90%" runat="server" /> 

    </div> 

</div> 

HTML輸出

<div id="Direction"> 
    <span id="MainContent_Label1" style="display:inline-block;color:#1B0358;font-size:Large;font-weight:bold;width:270px;">Chose the photo you like better.</span> 

</div> 
<div id="ratedpic"> 
    <p> 
     <span id="MainContent_RatedPicnameLabel">Margaret</span> 
    </p> 
    <input type="image" name="ctl00$MainContent$RatedImage" id="MainContent_RatedImage" src="Pictures/6f455ca0-27a0-49c3-ab61-e3f19e2e8258.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$RatedImage&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Member.aspx?UserID=9&quot;, false, false))" style="width:70%;" /><br /> 
    <span id="MainContent_RatedPicRating">Banged: 52%</span><br /> 
</div> 
<div id="MainPics"> 
    <div id="RightPic"> 
     <p> 
      <span id="MainContent_FirstPicMemberNameLabel" style="color:White;font-weight:bold;">Jessica-Jean</span> 
     </p> 
     <input type="image" name="ctl00$MainContent$FirstPicLink" id="MainContent_FirstPicLink" src="Pictures/2b5c7b66-00c4-4948-aa2b-7abef2f556f3.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$FirstPicLink&quot;, &quot;&quot;, false, &quot;&quot;, &quot;default.aspx?yesId=7&amp;noId=7&quot;, false, false))" style="width:90%;" /> 

    </div> 
    <div id="LeftPic"> 
     <p> 
      <span id="MainContent_SecondPicMemberNameLabel" style="color:White;font-weight:bold;">Amy</span> 
     </p> 
     <input type="image" name="ctl00$MainContent$SecondPicLink" id="MainContent_SecondPicLink" src="Pictures/ce698138-1dfc-46f8-aab7-fd7a1d5c5f0b.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$MainContent$SecondPicLink&quot;, &quot;&quot;, false, &quot;&quot;, &quot;default.aspx?yesId=12&amp;noId=7&quot;, false, false))" style="width:90%;" /> 

    </div> 

</div> 
+1

您應該分享我們大多數人的HTML標記來測試,而不是ASP腳本。雖然,我沒有看到CSS定義中任何位置的規則「z-index」。 – Shef 2011-12-17 14:41:06

回答

1

如果我正確理解你的問題,你需要周圍ratedpic和mainpic一個額外的包裝:http://jsfiddle.net/rgq4d/

我也強烈建議讓你的CSS的ID全部小寫,以防止輸入錯誤。

+0

謝謝你的工作。我贊成這個建議。我需要更多地考慮標準。 – CsharpBeginner 2011-12-17 15:22:35