whiteworking
@whiteworking
¯\_(ツ)_/¯

Как сверстать эти столбцы с bootstrap или обычным css?

5a74186c1c8ec004101401.jpeg
https://imgur.com/a/v7W8B
Есть зелёный блок, который представляет расширяющийся по нажатью список. Работает через ajax. Когда она раскрывается слева создается просто свободное пространство между красным и синим блоком. Подскажите как сверстать так, чтобы красный блок был всегда прижат к низу синего? Спасибо
  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
Anadi
@Anadi
Если ответ Вам помог мой, решением отметье его!
Например так:
.blue, .red, .green, .grey, .yellow {height: 150px;}
    .blue {background: blue;}
    .red {background: red;}
    .green {background: green; height: 300px;}
    .grey {background: grey;}
    .yellow {background: yellow;}

<div class="container-fluid">
        <div class="row">
            <div class="col-sm-8">
                <div class="row">
                    <div class="col-sm-12 blue">синий блок</div>
                    <div class="clearfix"></div>
                    <div class="col-sm-12 red">красный блок</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="col-sm-12 green">зеленый блок</div>
                <div class="clearfix"></div>
                <div class="col-sm-12 grey">серый блок</div>  
                <div class="clearfix"></div>
                <div class="col-sm-12 yellow">желтый блок</div>  
            </div>
        </div>
    </div>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
27cm
@27cm
TODO: Написать статус
Сделайте две колонки: в левой колонке будут красный и синий блоки, правой — все остальные. Тогда при растяжении зеленый блок не будет влиять на левую колонку. Сейчас вы верстали строками поэтому зеленый блок расширяет свою строку, а нужно сверстать колонками.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
30 нояб. 2021, в 21:47
1000 руб./за проект
30 нояб. 2021, в 21:47
1000 руб./за проект
30 нояб. 2021, в 21:14
5000 руб./за проект