Блог

Главная - Вопросы по программированию - Выровнять текст внизу div

Выровнять текст внизу div

#asp.net #html #css

#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 должен располагаться в правом нижнем углу родительского контейнера. Есть идеи? Но все, что я могу получить, это:
введите описание изображения здесь

Но я хочу:введите описание изображения здесь

Комментарии:

1. используйте position: абсолютный; затем top:…; left: …

2. также попробуйте jsfiddle в следующий раз. Работает хорошо…

3. js что? Я никогда не слышал об этом.

Ответ №1:

Попробуйте это:

 .FrontSlideShow {
    position: relative;
}

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

Комментарии:

1. очень близко, он проходит по всему низу, закрывая изображение, вместо того, чтобы оставаться только с правой стороны.

2. .FrontSlideShow . SlideShowSubTitle { выравнивание текста по правому краю; ширина: 300 пикселей; положение: абсолютное; справа: 20 пикселей; внизу: 20 пикселей; } сделало свое дело. Спасибо! Я приму это, как только это позволит мне.

Ответ №2:

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

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

Таким образом, ваш текст всегда будет согласованным и в одном и том же месте

Комментарии:

1. Чем это лучше, чем ответ Стивекомри? Мой текст, похоже, согласуется с его решением.

2. Мило. В любом случае, спасибо за вашу помощь, это все равно подтолкнуло бы меня в правильном направлении. Вот 10 к вашим усилиям.

3. я сделал верхний левый, а @steve — правый нижний, так что, я думаю, в конце получится то же самое, вам просто нужно поиграть со значениями