Уроки Html, Css / Как располагать элементы с помощью контейнеров фреймворка bootstrap
Тема 9. Как создавать макеты и контейнеры в HTML?
Эта тема объединяет методы организации и группировки контента для создания структурированных макетов с использованием блочных элементов. <div class="container">
<p>Контент внутри контейнера.</p>
</div> <style>.
flex-container {
display: flex;
justify-content: space-between;
}.
flex-item {
background: #f4f4f4;
padding: 20px;
margin: 10px;
}
</style>
<div class="flex-container">
<div class="flex-item">Блок 1</div>
<div class="flex-item">Блок 2</div>
<div class="flex-item">Блок 3</div>
</div> <style>...
Урок 11. Расстановка блоков и контейнеров
Проверка задания 5 На уроке 10 вы получили задание: У меня получился такой результат в html-файле: На экране браузера у вас должен появиться схожий результат дизайна: Позиционирование внутренних блоков в контейнере Сегодня нашей первой задачей будет научиться упрощённо устанавливать блоки внутри контейнеров не просто вертикально друг за другом, а горизонтально как информационные блоки. Для этого наш первый контейнер <div> сделаем родственным блокам, которые помещены внутри него. Иначе браузер может воспринять блоки <p> как самостоятельные контейнеры...