Как прикрепить текст к низу с расширением вверх?

158

22 сентября 2018, 17:10

Ка сделать чтобы было как на картинке, чтобы в зависимости от высоты 2-ого снизу поля, 3-е снизу меняло свою позицию.

.categories__items { 
    display: inline-block; 
    padding: 0 10px; 
} 
 
.categories__items > div { 
    width: 210px; 
    height: 290px; 
    margin: 20px 10px 0 10px; 
    border: 1px solid grey; 
    float: left; 
    padding: 15px; 
    box-sizing: border-box; 
} 
 
.item__image { 
    width: 180px; 
    height: 100px; 
    transform: scale(1.7); 
} 
 
.item__number { 
    font-size: 8px; 
}

<div class="categories__items"> 
            <div class="categories__item1"> 
                <p class="item__price">$45.50</p> 
                <img class="item__image" src="img/tapok.svg" alt=""> 
                <p class="item__male">MEN</p> 
                <p class="item__name">Converse</p> 
                <p class="item__number">#3247234</p> 
            </div> 
            <div class="categories__item2"> 
                <p class="item__price"></p> 
                <img class="item__image" src="" alt=""> 
                <p class="item__male"></p> 
                <p class="item__name"></p> 
                <p class="item__number"></p> 
            </div> 
            <div class="categories__item3"> 
                <p class="item__price"></p> 
                <img class="item__image" src="" alt=""> 
                <p class="item__male"></p> 
                <p class="item__name"></p> 
                <p class="item__number"></p> 
            </div> 
            <div class="categories__item4"> 
                <p class="item__price"></p> 
                <img class="item__image" src="" alt=""> 
                <p class="item__male"></p> 
                <p class="item__name"></p> 
                <p class="item__number"></p> 
            </div> 
            <div class="categories__item5"> 
                <p class="item__price"></p> 
                <img class="item__image" src="" alt=""> 
                <p class="item__male"></p> 
                <p class="item__name"></p> 
                <p class="item__number"></p> 
            </div> 
            <div class="categories__item6"> 
                <p class="item__price"></p> 
                <img class="item__image" src="" alt=""> 
                <p class="item__male"></p> 
                <p class="item__name"></p> 
                <p class="item__number"></p> 
            </div> 
            <div class="categories__item7"> 
                <p class="item__price"></p> 
                <img class="item__image" src="" alt=""> 
                <p class="item__male"></p> 
                <p class="item__name"></p> 
                <p class="item__number"></p> 
            </div> 
            <div class="categories__item8"> 
                <p class="item__price"></p> 
                <img class="item__image" src="" alt=""> 
                <p class="item__male"></p> 
                <p class="item__name"></p> 
                <p class="item__number"></p> 
            </div> 
        </div>

Answer 1

.categories__items { 
    display: inline-block; 
    padding: 0 10px; 
} 
 
.categories__items > div { 
    width: 210px; 
    height: 290px; 
    margin: 20px 10px 0 10px; 
    border: 1px solid grey; 
    float: left; 
    padding: 15px; 
    box-sizing: border-box; 
} 
 
.item__image { 
    width: 180px; 
    height: 100px; 
    transform: scale(1.7); 
} 
 
.item__number { 
    font-size: 8px; 
} 
 
.con { 
    position: relative; 
 
} 
 
.con2 { 
    position: absolute; 
 
    bottom: -250px; 
}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/main.css"> 
</head> 
 
<body> 
    <div class="categories__items"> 
        <div class="categories__item1"> 
            <p class="item__price">$45.50</p> 
            <img class="item__image" src="img/tapok.svg" alt=""> 
            <p class="item__male">MEN</p> 
            <p class="item__name">Converse</p> 
            <p class="item__number">#3247234</p> 
        </div> 
        <div class="categories__itm2"> 
            <div class="con"> 
                <div class="con2"> 
 
 
                    <p class="item__price">$45.50</p> 
                    <img class="item__image" src="img/tapok.svg" alt=""> 
                    <p class="item__male">MEN</p> 
                    <p class="item__name">Converse</p> 
                    <p class="item__name">Converse</p> 
                    <p class="item__name">Converse</p> 
                    <p class="item__name">Converse</p> 
                    <p class="item__number">#3247234</p> 
                </div> 
            </div> 
        </div> 
        <div class="categories__item3"> 
            <p class="item__price"></p> 
            <img class="item__image" src="" alt=""> 
            <p class="item__male"></p> 
            <p class="item__name"></p> 
            <p class="item__number"></p> 
        </div> 
        <div class="categories__item4"> 
            <p class="item__price"></p> 
            <img class="item__image" src="" alt=""> 
            <p class="item__male"></p> 
            <p class="item__name"></p> 
            <p class="item__number"></p> 
        </div> 
        <div class="categories__item5"> 
            <p class="item__price"></p> 
            <img class="item__image" src="" alt=""> 
            <p class="item__male"></p> 
            <p class="item__name"></p> 
            <p class="item__number"></p> 
        </div> 
        <div class="categories__item6"> 
            <p class="item__price"></p> 
            <img class="item__image" src="" alt=""> 
            <p class="item__male"></p> 
            <p class="item__name"></p> 
            <p class="item__number"></p> 
        </div> 
        <div class="categories__item7"> 
            <p class="item__price"></p> 
            <img class="item__image" src="" alt=""> 
            <p class="item__male"></p> 
            <p class="item__name"></p> 
            <p class="item__number"></p> 
        </div> 
        <div class="categories__item8"> 
            <p class="item__price"></p> 
            <img class="item__image" src="" alt=""> 
            <p class="item__male"></p> 
            <p class="item__name"></p> 
            <p class="item__number"></p> 
        </div> 
    </div> 
</body> 
</html>

Подобавляйте и поубирайте Converse во втором блоке, как видите блок расширятся вверх.