html — Grid css. Надо переместить блок с текстом под картинку
Задать вопрос
Вопрос задан
Изменён 11 месяцев назад
Просмотрен 139 раз
Мне надо переместить текст «Lorem…» под картинку используя grid css.
.main__item {
border: 1px solid #7c7c7c;
margin-top: 70px;
margin-bottom: 15px;
}
.item__title {
text-transform: uppercase;
font-size: 20px;
color: #444444;
font-weight: 700;
}
.item__block {
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 20px;
}
.bold {
font-weight: 700;
}
.item__text {
margin-bottom: 0.3em;
}
.item__span {
padding-left: 10px;
}
.
item__img {
max-height: 250px;
}
.wrapper-block {
display: grid;
grid-column-gap: 25px;
grid-template-columns: 1fr 1fr 1fr;
}
.item__wrapper {
grid-column: 2 / 4;
}
.item__block-second {
grid-column: 2 / 4;
}
.item__block-first {
grid-column: 1;
}
item__img {
max-height: 250px;
}
.wrapper-block {
display: grid;
grid-column-gap: 25px;
grid-template-columns: 1fr 1fr 1fr;
}
.item__wrapper {
grid-column: 2 / 4;
}
.item__block-second {
grid-column: 2 / 4;
}
.item__block-first {
grid-column: 1;
}<div>
<div>
<h5>1. Resident evil 7: biohazard</h5>
<div>
<div>
<img src="img/item-img-first.PNG" alt="">
</div>
<div>
<div>
<span><span>Platform: </span>PC, PS4, Xbox, One, and Nintelendo Switch</span>
<br>
<span><span>Price: </span>$20.98</span>
<br>
<span><span>Rating: </span>7. 7/10 IGN/85% Metacritic</span>
</div>
<div>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Porro in est laudantium cum natus ea ratione aliquid, vitae adipisci, rerum fugit fuga veritatis! Perferendis, iste!</p>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Tempora sequi enim temporibus totam magnam aperiam iure, amet voluptate, maxime asperiores, nostrum eos ipsum nam ad.</p>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ad, inventore accusantium sed voluptas nulla quae sunt, consequuntur vel vitae labore perferendis atque voluptatum quo.</p>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Ex minus qui repudiandae aut quas facere est deserunt, nulla, commodi maxime animi nesciunt quisquam quo saepe?</p>
</div>
</div>
</div>
</div>
</div>
7/10 IGN/85% Metacritic</span>
</div>
<div>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Porro in est laudantium cum natus ea ratione aliquid, vitae adipisci, rerum fugit fuga veritatis! Perferendis, iste!</p>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Tempora sequi enim temporibus totam magnam aperiam iure, amet voluptate, maxime asperiores, nostrum eos ipsum nam ad.</p>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ad, inventore accusantium sed voluptas nulla quae sunt, consequuntur vel vitae labore perferendis atque voluptatum quo.</p>
<p><span>Lorem</span> ipsum dolor sit amet, consectetur adipisicing elit.
- html
- css
- grid
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
css — Как переместить элемент html вниз/вверх?
Изменён 4 месяца назад
Просмотрен 1k раз
нужно расположить 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" top: 500;>
<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">
</body>
</html>
5%;
}
</style>
</head>
<body bgcolor="#2c2c2c">
<img src="images/1.png" top: 500;>
<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">
</body>
</html>- html
- css
Изменил ваш код, теперь он работает как надо.
<html>
<head>
<title>Дизайнерське меню</title>
<style>
body {
background-color: #2c2c2c;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
</style>
</head>
<body>
<div>
<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>
Сделай через grid так удобней
.wrapper{
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2vw; /* это своего рода margin */
}
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
Перемещение изображения в другое место с помощью четырех кнопок, демонстрация
Мы можем переместить изображение в другое место с помощью кнопок. Текущее местоположение изображения можно получить с помощью значений offsetLeft и offsetTop. К этому значению мы добавим значение шага Демонстрация движущегося изображения→
Мы будем использовать четыре кнопки (левая, правая, верхняя, нижняя), чтобы задать направление движения изображения.
<тип ввода=кнопка onClick=move_img('вверх') значение='вверх'>
<тип ввода=кнопка onClick=move_img('право') значение='право'>
<тип ввода=кнопка onClick=move_img('вниз') значение='вниз'> При нажатии каждой кнопки мы будем переходить к функции move_img() внутри области JavaScript.
В зависимости от направления мы выполним оператор switch().
Из четырех направлений это условие переключения будет соответствовать одному направлению и, соответственно, установит новое положение изображения после считывания текущего положения изображения. Давайте посмотрим, когда нажата кнопка «Вверх». корпус "вверх":
var x=document.getElementById('i1').offsetTop;
х= х -шаг;
document.getElementById('i1').style.top= x + "px";
перерыв; В приведенном выше коде мы сначала считываем значение вертикальной координаты изображения и сохраняем его в переменной x. По мере продвижения вверх мы будем вычитать значение шага из x . Теперь мы можем изменить положение изображения, обновив новое значение style.top .Движение вниз
В приведенном выше коде нам нужно изменить только значение x, добавивх=х+шаг;Вот полный код.
<голова>Демонстрация изменения положения изображения в JavaScript , а затем тег