Как переместить элемент html вниз/вверх?

Question

нужно расположить 9 картинок квадратом (как кубик рубика). Результат кода на картинке. Все перепробовал, но получается какой-то бред.

<html>
	<head>
		<title>Дизайнерське меню</title>
		<style>
		.first {
			display : block;
			margin : 3 auto;
			margin-right: 54.5%;
		}
		.second {
			display : block;
			margin : 3 auto;
		}
		.third {
			display : block;
			margin : 3 auto;
			margin-left: 54.5%;
		}
		</style>
	</head>
	
	<body bgcolor="#2c2c2c">
		<img src="images/1.png" class="first" top: 500;>
		<img src="images/2.png" class="first">
		<img src="images/3.png" class="first">
		<img src="images/4.png" class="second">
		<img src="images/5.png" class="second">
		<img src="images/6.png" class="second">
		<img src="images/7.png" class="third">
		<img src="images/8.png" class="third">
		<img src="images/9.png" class="third">
		
	</body>
</html>

Answer 1

Изменил ваш код, теперь он работает как надо.

<html>
   <head>
      <title>Дизайнерське меню</title>
      <style>
         body {
           background-color: #2c2c2c;
         }
         .wrapper {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
         }
      </style>
   </head>
   <body>
      <div class="wrapper">
         <img src="images/1.png">
         <img src="images/2.png">
         <img src="images/3.png" >
         <img src="images/4.png">
         <img src="images/5.png">
         <img src="images/6.png">
         <img src="images/7.png">
         <img src="images/8.png" >
         <img src="images/9.png">
      </div>
   </body>
</html>

Answer 2

Сделай через grid так удобней

.wrapper{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2vw; /* это своего рода margin */
}

Answer 3

Предложу пример, который создаёт аккуратную и адаптивную сетку из 9 картинок, как у кубика Рубика. Используется grid с repeat() для компактности и aspect-ratio, чтобы сетка всегда оставалась квадратной.

Добавлены отступы через clamp, скругления и тени для визуального эффекта.

Всё масштабируется и хорошо смотрится на любом экране.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #2c2c2c;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: clamp(8px, 2vw, 20px);
  width: 90vmin;
  aspect-ratio: 1 / 1;
}

.grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

<div class="grid">
  <img src="https://i.sstatic.net/cWfcaeGg.png" alt="кубик Рубика">
  <img src="https://i.sstatic.net/UjlqZNED.png" alt="кубик Рубика">
  <img src="https://i.sstatic.net/T4iZ71Jj.png" alt="кубик Рубика">
  <img src="https://i.sstatic.net/oTD9fHeA.png" alt="кубик Рубика">
  <img src="https://i.sstatic.net/2uxtQBM6.jpg" alt="кубик Рубика">
  <img src="https://i.sstatic.net/9QWHm04K.png" alt="кубик Рубика">
  <img src="https://i.sstatic.net/T4iZ71Jj.png" alt="кубик Рубика">
  <img src="https://i.sstatic.net/UjlqZNED.png" alt="кубик Рубика">
  <img src="https://i.sstatic.net/cWfcaeGg.png" alt="кубик Рубика">
</div>

БЛОГ НА HUSL

Как переместить элемент html вниз/вверх?

Ответы (3 шт):