2

Ка сделать чтобы было как на картинке, чтобы в зависимости от высоты 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>

3
  • Так третье снизу поле вроде как и меняает свое положение при добавлении блоков текста ко второму полю. Или же вы хотите чтобы блок с текстом наоборот к верху вытягивался?
    – midia
    23 июл 2018 в 15:52
  • Кстати тоже верстаю этот макет;)
    – midia
    23 июл 2018 в 15:53
  • @midia Да, хочу чтобы вытягивались вверх, чтобы расстояние от границы до номера снизу было везде одинаковым
    – Ilya
    23 июл 2018 в 16:08

1 ответ 1

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 во втором блоке, как видите блок расширятся вверх.

1
  • Спасибо большое)))
    – Ilya
    23 июл 2018 в 16:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.