Расположить объекты чтобы другие не смещались

@Nait1336 · Регистрация: 03.12.2018

Студворк — интернет-сервис помощи студентам

Когда пытаюсь позиционировать стрелочки то контент в блоках сужается и двигается
Пробовал давать position:absolute, но не правлильно же каждую стрелочку с двух сторон подгонять маржинами?
Есть такое свойство, которое не изменяет положение объекта и не меняет контент в других блоках, от собственного передвижения в разные стороны?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="steps">
                    <div class="step1">
                        <img src="img/howitwork1.png" class="wan">
                        <h1 class="numberstep">step 1</h1>
                        <div class="howtext">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
                        </div>
                    </div>
                    <div class="arrow">
                        <img src="img/arrow1.png" alt="png">
                    </div>
                <div class="step1">
                        <img src="img/howitwork2.png" class="wan">
                        <h1 class="numberstep">step 2</h1>
                        <div class="howtext">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
                        </div>
                    </div>
                    <div class="arrow2">
                        <img src="img/arrow2.png" alt="png">
                    </div>
                <div class="step1">
                        <img src="img/howitwork3.png" class="wan">
                        <h1 class="numberstep">step 3</h1>
                        <div class="howtext">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
                        </div>
                    </div>
                    <div class="arrow">
                        <img src="img/arrow1.png" alt="png">
                    </div>
                <div class="step1">
                        <img src="img/howitwork4.png" class="wan">
                        <h1 class="numberstep">step 4</h1>
                        <div class="howtext">
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been</p>
                        </div>
                    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.steps {
    display:flex;
    margin:0 auto;
    padding-top:60px;
    width:1170px;
 
}
.step1 {
    width:215px;
    margin: 0 40px;
}
 
.wan {
    display:block;
    margin:auto;
    padding-bottom: 80px;   
    
}
 
.numberstep {
    text-align: center;
    text-transform: uppercase;
    font-size:20px;
    color:#394b50;
    font-family: 'Arial';
    font-weight: 700;
 
} 
 
.howtext {
    text-align: center;
    font-size: 13px;
    font-family: 'Open Sans';
    color:#7b7b7b;
    font-weight: 300;
}
 
.arrow {
 
}
 
.arrow2 {
 
}

@Nait1336 · 21.10.2019, 18:36 **[ТС]**

Вот, сужает контент

Расположить объекты чтобы другие не смещались

Вот что должно получиться

@Nait1336 · 21.10.2019, 19:13 **[ТС]**

Вот как выглядит без стрел

@Cheeeasy2501 · 21.10.2019, 19:35

Nait1336, структуру неправильно строите потому что

@Nait1336 · 21.10.2019, 19:44 **[ТС]**

Cheeeasy2501, А как правильней построить?

@Cheeeasy2501 · 21.10.2019, 20:06

Nait1336, Картинки отдельно, текст отдельно, это как бы я флексами делал
или абсолютом вставлять стрелки и -margin в процентах ставить
Можно конечно по нормельному на гридах сделать)
еще как вариант попробуйте тексту отдельно минус margin дать влева и вправа

Добавлено через 12 минут
UPD: не партесь, просто дайте .hovtext { margin:0 -40px}

@Nait1336 · 21.10.2019, 21:02 **[ТС]**

Cheeeasy2501, Тогда отступы между блоками не работают. Короче накосячил я сильно, нужно всё переделывать

Добавлено через 2 минуты
Cheeeasy2501, А обычно когда верстают по типу такого блоки, то все делают как я ? или всё отдельно, как вы предлагаете

@Cheeeasy2501 · 21.10.2019, 21:18

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

@Nait1336 · 22.10.2019, 09:45 **[ТС]**

Cheeeasy2501, т.е выравнивать такие трудные элементы(иногда), задавая абсолют и подгоняя маржинами, вполне нормально?

@Cheeeasy2501 · 22.10.2019, 10:13

Nait1336, В идеале было бы лучше гридами сделать это, но и так впринципе сойдет, если проблем с адаптивом не будет потом

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	21.10.2019, 18:36 [ТС]
	Вот, сужает контент Вот что должно получиться 0

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	21.10.2019, 19:13 [ТС]
	Вот как выглядит без стрел 0

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	21.10.2019, 19:35
	Nait1336, структуру неправильно строите потому что 0

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	21.10.2019, 19:44 [ТС]
	Cheeeasy2501, А как правильней построить? 0

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	21.10.2019, 20:06
	Nait1336, Картинки отдельно, текст отдельно, это как бы я флексами делал или абсолютом вставлять стрелки и -margin в процентах ставить Можно конечно по нормельному на гридах сделать) еще как вариант попробуйте тексту отдельно минус margin дать влева и вправа Добавлено через 12 минут UPD: не партесь, просто дайте .hovtext { margin:0 -40px} 0

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	21.10.2019, 21:02 [ТС]
	Cheeeasy2501, Тогда отступы между блоками не работают. Короче накосячил я сильно, нужно всё переделывать Добавлено через 2 минуты Cheeeasy2501, А обычно когда верстают по типу такого блоки, то все делают как я ? или всё отдельно, как вы предлагаете 0

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	21.10.2019, 21:18
	Nait1336, честно я вам так сейчас не скажу как правильно. Я бы гридовскую сетку делал и размещал там элементы 0

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	22.10.2019, 09:45 [ТС]
	Cheeeasy2501, т.е выравнивать такие трудные элементы(иногда), задавая абсолют и подгоняя маржинами, вполне нормально? 0

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	22.10.2019, 10:13
	Nait1336, В идеале было бы лучше гридами сделать это, но и так впринципе сойдет, если проблем с адаптивом не будет потом 0