Задать вопрос
@Dant3lion
html

Как разместить элементы по относительной позиции?

Недавно стал изучать веб-разработку, и встал вопрос по размещению элементов.
605ce7033ef11842697084.jpeg
Хотел разместить 3 блока по середине, но получается только так:
605ce7f55d591169061906.png
Код для участка такой:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">
	<title>ProtoMASH_Alpha</title>
	<style type="text/css">
   body {
	position: relative;
	background-size: 100%;
	background-image: url(sauces/fon.jpg);
	background-repeat: no-repeat;
   }
   #hdr_body {
   margin: 1% 3% 0% 5%;
   width: 1330px;
			height: 40px;
			background-color: white;
			border: 4px blue double;
			border-radius: 10px;
   }
   .hdr_butt {
			postion:absolute;
			height: 30px;
			width: 200px;
			margin-top: 5px;
			margin-left: 5px;
			line-height: 30px;
			text-align: center;
			background-color: #E5E4E2;
			border: 1px grey solid;
			border-radius: 10px;
			display: inline-block;
			text-align: center;		
   }
   .osnova {
			
			line-height: 30px;
			text-align: center;
			background-color: #E5E4E2;
			border: 1px grey solid;
			border-radius: 10px;
			display: inline-block;
			text-align: center;
   }
   #main_body {
   
   }
  </style>
</head>
<body>
	<h1></h1>
	<div id="hdr_body">
		<div onclick="main_butt" class="hdr_butt">Main</div>
		<div onclick="cour" class="hdr_butt" style="margin-left:350px;">Courses</div>
		<div onclick="pract" class="hdr_butt" style="margin-left: 350px;">Practice Mode</div>
	</div>
	<div id="main_body">
		<div onclick="enter" class="osnova" style="position:relative; height: 305px; width: 400px;  margin-top: 10%; margin-left: 21%;"></div>
		<div onclick="dopMode" class="osnova" style="position: relative; height: 150px; width: 400px; margin-right:0.1%;margin-bottom: 11%"></div>
		<div onclick="chall" class="osnova" style="position: relative; height: 150px; width: 400px; margin-bottom: 100px ;margin-left:49.5%"></div>

	</div>
	<div id="foot_body"></div>
	<script>
	</script>
</body>
</html>
  • Вопрос задан
  • 41 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Для такой раскладки лучше всего подходят гриды https://jsfiddle.net/e780f9md/

Флексы плохи тем, что придется задавать высоту контейнеру, а в верстке так лучше не поступать. Потому что, обычно, мы не знаем сколько будет контента в этих блоках, а также какую высоту займет блок, если его ширина будет уменьшаться или увеличиваться при адаптиве.

P.S.
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8">

Это устаревшая запись, сейчас используется короткая: <meta charset="UTF-8">

<style type="text/css"> - аналогично. Сейчас не нужно указание типа для тега style.

Если вы смотрели курсы, в которых показывали такой код, то они устарели по крайней мере лет на 5, а то и больше.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@iminby
Тебе стоит ещё поучить и почитать, чем браться за макеты))
без обид)
Тут всё легко решается флексами.
и зачем тут вообще position))
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Фронт мобильное приложение
25 апр. 2024, в 10:42
150000 руб./за проект
Настроить вёрстку webapp-telegram
25 апр. 2024, в 10:41
2000 руб./за проект
Создать дудл - видео с AI аватаром
25 апр. 2024, в 10:25
2000 руб./за проект
Ещё заказы