Задать вопрос

Sulim Programmer @II_95_LeGeNdA_95_II

Увлекаюсь веб-разработкой и хочу этим зарабатывать

html

Что надо делать чтобы тот нижний блок обтекал синий(без свойства float)?

Это надо делать ЖЕЛАТЕЛЬНО с помошью "FlexBox

"
Решение: Два блока(или более) которые должны стоять рядом, должны быть в одном блоке(желательно дать class или id, Мы например дадим class="primer"), а те которые должны быть с верху или снизу (header/footer) должны быть отдельны.
И в css нужно написать классу primer следующее:

.primer {
 display: flex;
flex-direction: row;
}

Вопрос задан более трёх лет назад
87 просмотров

3 комментария

Подписаться 1 Средний 3 комментария

Sulim Programmer @II_95_LeGeNdA_95_II Автор вопроса

Поднять его так скажем...

Написано более трёх лет назад
Василий Варюхин @Hocopor

Приведите пример вашего кода.

Написано более трёх лет назад

Sulim Programmer @II_95_LeGeNdA_95_II Автор вопроса

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="musor.css">
	<meta charset="UTF-8">
	<title>ДОКУМЕНТ</title>
</head>
<body>
<div class="main">
	<div class="header"></div>
	<div class="left"></div>
	<div class="content"></div>
	<div class="footer"></div>
</div>
</body>
</html>

body {
	padding: 0;
	margin: 0;
}
.main {
	display: flex;
	flex-direction: column;
}
.header {
	height: 100px;
	width: 100%;
	background-color: red;
}

.left {
	height: 655px;
	width: 30%;
	background-color: blue;
}

.content {
	width: 70%;
	background-color: green;
	height: 100px;
	height: 655px;
	justify-content: space-around;

}

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Профессиональная вёрстка на HTML и CSS

3 месяца

Далее
Stepik

Основы HTML и CSS

2 недели

Далее
OTUS

HTML/CSS

3 месяца

Далее

Пригласить эксперта

Ваш ответ на вопрос

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

Похожие вопросы

CSS

Простой
Как сверстать кастомную пунктирную обводку у блока?
- 1 подписчик
- 17 нояб.
- 159 просмотров
2

ответа
CSS

Простой
Можно ли использовать функцию calc() в медиазапросах?
- 1 подписчик
- 13 нояб.
- 192 просмотра
1

ответ
HTML

+1 ещё

Простой
Как реализовать форму ввода как в веб-версии chatGPT?
- 3 подписчика
- 13 нояб.
- 182 просмотра
0

ответов
CSS

+1 ещё

Простой
Как оптимизировать svg картинку?
- 1 подписчик
- 11 нояб.
- 161 просмотр
1

ответ
CSS

Средний
Как найти стили в шаблоне Битрикс?
- 1 подписчик
- 06 нояб.
- 165 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать горизонтальный скролл стрелками?
- 1 подписчик
- 05 нояб.
- 237 просмотров
1

ответ
PHP

+2 ещё

Простой
Создание элемента с необычной формой и прозрачным фоном и рамкой?
- 1 подписчик
- 03 нояб.
- 185 просмотров
0

ответов
CSS

Простой
Как выстроить 4 блока, чтобы расстояния были одинаковые на флексах?
- 1 подписчик
- 31 окт.
- 143 просмотра
2

ответа
CSS

Простой
Как правильно задать размеры блоков?
- 1 подписчик
- 31 окт.
- 106 просмотров
1

ответ
HTML

Простой
При клике на кастомную кнопку “Скачать” не происходит переход, хотя JS-обработчик отрабатывает. Как решить?
- 1 подписчик
- 29 окт.
- 186 просмотров
0

ответов
Показать ещё Загружается…

PHP-разработчик

FoodSoul • Калининград

от 180 000 до 250 000 ₽

Специалист технической поддержки (чат)

WebSoft

от 50 000 до 70 000 ₽

Frontend Developer (React + Node.js)

Alfabet Service

от 1 000 до 2 000 $