div内のdiv div整列

Question

「スキップ - 私は決めることができません」Aprearは黒い矩形の中央を底にしています。 Iveはこれを正しく行うためにCssに苦労しました。あなたは私のCSSを修正する方法を指摘できますか？

defaultpage

<div id="pictures"> 
      <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> 
    <div id="skip"> 
     <a href="default.aspx">SKIP - I Cant Choose.</a></div> 
</div> 

のCss

div#pictures 
    { 
    } 
    div#MainPics 
    { 
     height: 650px; 
     width: 60%; 
     -moz-border-radius: 35px; 
     border-radius: 35px; 
     background-color: Black; 
     margin-left: auto; 
     margin-right: auto; 
    } 
    #RightPic 
    { 
     position: relative; 
     float: left; 
     width: 45%; 
     text-align: center; 
    } 
    #LeftPic 
    { 
     position: relative; 
     float: left; 
     width: 45%; 
     text-align: center; 
    } 
    div#skip 
    { 
     position: relative; 
     width: 50%; 
     margin-left: auto; 
     margin-right: auto; 
     text-align: center; 
    } 

Answer 1

簡単な解決策とします：

<div id="pictures"> 
    <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 id="skip"> 
      <a href="default.aspx">SKIP - I Cant Choose.</a> 
     </div> 
    </div> 
</div> 

Answer 2

あなたはそれがすべての回で底に残っているしたい場合は、

絶対的に配置されるようにスキップ設定する必要があります

#pictures { position:relative } 
#skip { position:absolute; bottom:5px; /*5px for a bit of spacing*/ } 

Answer 3

＃MainPics divは必要ありません。 #MainpicsのCSSを#pictures divに移動するだけです。ここではフィドルはMainpics divの内側にスキップのdivを移動し、下部にあるリンクを「スキップ」----->HERE

Answer 4

div#skip 
{ 
    top:-30px; 
    position:relative; 
    ... 
}