对齐div底部的文本

时间:2011-05-11 03:52:12

标签: asp.net html css

这是我的CSS

.FrontSlideShow
{   
   display:block; 
   overflow: none; 
   height: 323px;
   margin-bottom: 12px; 
   background-color:#005596; 
   background-image: url(/*edited*/); 
   background-repeat: repeat-x; width:754px; font-family:   verdana; font-size:large; 
   color:#FFFFFF; 
   clear:both; 
}

.FrontSlideShow .SlideShowImage
{
   float: left; 
   vertical-align:text-bottom; 
   padding-right: 24px;
}

.FrontSlideShow .SlideShowSubTitle
{ 
    vertical-align: text-bottom;
     margin-bottom: 10px;
}

这是标记

    <div class="FrontSlideShow">
      <div class="SlideShowMainTitle">
        <asp:Label ID="lblSlideTitle" runat="server"></asp:Label>
      </div>
      <div class="SlideShowImage">
        <asp:Image ID="imgSlide" runat="server" />
      </div>
      <div  class="SlideShowSubTitle">            
            <asp:Label ID="lblSlideDescription" runat="server"></asp:Label>           
      </div>
        <asp:Button ID="btnPrev" runat="server" Text="Prev" /><asp:Button ID="btnNext" runat="server" Text="Next" />
        <asp:SlideShowExtender ID="slExtender" runat="server" AutoPlay="true" Loop="true" PlayInterval="3000" TargetControlID="imgSlide" NextButtonID="btnNext" PreviousButtonID="btnPrev"
             ImageTitleLabelID="lblSlideTitle" ImageDescriptionLabelID="lblSlideDescription" SlideShowServiceMethod="GetSlides" SlideShowServicePath="~/WebServices/SlideShowService.asmx">
        </asp:SlideShowExtender>
        <asp:Literal ID="liMarkup" runat="server"></asp:Literal>
    </div>   

字幕div需要位于父容器的右下角。有任何想法吗?但我能得到的是: enter image description here

但我想:enter image description here

2 个答案:

答案 0 :(得分:5)

试试这个:

.FrontSlideShow {
    position: relative;
}

.FrontSlideShow .SlideShowSubTitle {
    position: absolute;
    right : 20px;
    bottom: 20px;    
}

答案 1 :(得分:2)

.FrontSlideShow {
     ....
     position:relative;
     ....
} 

.FrontSlideShow .SlideShowSubTitle {
      position:absolute;
      top: 300px; // your values
      left: 400px;// your values
 } 

这样你的文字总是一致的并且在同一个地方