Как выровнять блоки по нижней части div-а?

Тема в разделе "Верстка", создана пользователем verfaa, 6 ноя 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. verfaa

    verfaa

    Регистр.:
    29 янв 2007
    Сообщения:
    373
    Симпатии:
    41
    Есть div: <div class="row ms2_product">:
    CSS:
    Код:
    .ms2_product {
    width: 190px;
    height: 320px;
    float: left;
    display: inline-block;
    margin-right: 10px;
    overflow: hidden;
    [​IMG]
    Внутри этого div-а присутствуют ещё 2 div-а:
    Код:
      
    <div class="span2">
        <img src="images/c2.jpg">
    </div>
        <div class="row span10">
            <p><a href="plitka.html">Бордюр ...</a>
        </div>
    
    По умолчанию они прижаты к верхнему краю.
    Как прижать их к нижнему краю?
    Пробовал прописывать для ms2_product span2 и span10 vertical-align: bottom;
    не помогло
     
  2. xoxmo

    xoxmo Постоялец

    Регистр.:
    24 мар 2008
    Сообщения:
    142
    Симпатии:
    86
    1. для главного блока надо добавить position:relative;
    2. для внутренних блоков надо добавить position:absolute;
    3. далее внутренние блоки прижать при помощи bottom:0; для одного и bottom:25px; для другого (25px это цифра с потолка, надо ставить в зависимости он высоты блока)
    примерно так: http://jsfiddle.net/ZcKgU/1/ (для наглядности основному блоку добавил border:1px solid black; )
     
    verfaa нравится это.