Загрузочный текст 3 Выровняйте текст до нижней части Div

Я пытаюсь получить настройку в Bootstrap, которая будет выглядеть примерно так, где у меня есть текст, выровненный по нижней части изображения:

================================================
|                                              |
|    ####################                      |
|    ##THIS IS AN IMAGE##                      |
|    ####################   ...And some text!  |
|                                              |
================================================

Итак, я пробовал это:

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

Но я получаю нечто похожее на это, где текст выровнен по верхнему краю:

================================================
|                                              |
|    ####################  ...And some text!   |
|    ##THIS IS AN IMAGE##                      |
|    ####################                      |
|                                              |
================================================

Я пробовал несколько трюков с позиционированием, чтобы заставить его работать, но когда я это делаю, он ломает мобильность в первую очередь Bootstrap. Когда он рухнул до размера телефона, мне нужно, чтобы он привязался к этому:

==========================
|                        |
|  ####################  |
|  ##THIS IS AN IMAGE##  |
|  ####################  |
|                        |
|   ...And some text!    |
|                        |
==========================

Так что делать это как таблицу действительно не вариант.

EDIT: Здесь сценарий, любезно предоставленный Джозефом Марикле в комментариях: D http://jsfiddle.net/6WvUY/1/

Ответы

Ответ 1

Я думаю, что лучше всего использовать комбинацию абсолютного и относительного позиционирования.

Здесь сценарий: http://jsfiddle.net/PKVza/2/

учитывая ваш html:

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

используйте следующий CSS:

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

EDIT. Исправлены CSS и JSFiddle для мобильности и изменения идентификатора для класса.

Ответ 2

Я собрал некоторые идеи из другого вопроса SO (в основном из здесь и эта страница css)

Fiddle

Идея состоит в том, чтобы использовать относительное и абсолютное позиционирование, чтобы переместить линию вниз:

@media (min-width: 768px ) {
.row {
    position: relative;
}

#bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }}

Опция display:flex на данный момент является решением для того, чтобы div получил тот же размер, что и его родитель. С другой стороны, это ломает возможности бутстрапа для автоматической линии на небольших устройствах, добавляя класс col-sx-12. (Вот почему необходим медиа-запрос)

Ответ 3

Вы можете сделать это:

CSS

#container {
    height:175px;
}

#container h3{
    position:absolute;
    bottom:0;
    left:0;
}

Затем в HTML:

div class="row">
    <div class="col-sm-6">
        <img src="//placehold.it/600x300" alt="Logo" />
    </div>
    <div id="container" class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

Ответ 4

Здесь другое решение: http://jsfiddle.net/6WvUY/7/.

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
        </div>
        <div class="col-sm-6">
            <h3>Some Text</h3>
        </div>
    </div>
</div>

CSS

.row {
    display: table;
}

.row > div {
    float: none;
    display: table-cell;
}

Ответ 5

Самый простой способ, который я тестировал, просто добавить <br>, как в следующем:

<div class="col-sm-6">
    <br><h3><p class="text-center">Some Text</p></h3>
</div>

Единственная проблема заключается в том, что дополнительный разрыв строки (сгенерированный этим <br>) генерируется, когда экран становится меньше, и он складывается. Но это быстро и просто.