Позиционирование текста

@FlexKoot · Регистрация: 21.11.2019

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

Здравствуйте, по учебе задали сверстать сайт по псд шаблону, не понимаю как блок с вертикальным таймлайном(2011, 2012,2013,2014) сверстать так, чтобы блоки с текстом были присвоены к точкам на этом таймлайне, потому что выравниваю на одном устройстве через отступы, на другом все рухнет.

Прикладываю файл псд и скриншот с отмеченной зоной.

@mr_dramm · 22.09.2021, 16:27

PHP/HTML    
        
            
                
                
                
                
            
        
    Скопировано
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
 
<head>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    body {
        background: #1D1D1D;
        color: #797979;
        text-align: justify;
    }
 
    .wrapper {
        display: flex;
        flex-wrap: wrap;
        min-width: 400px;
        max-width: 800px;
        margin: 0 auto;
        padding: 3rem 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 49.7%, rgba(121, 121, 121, 1) 50%, rgba(255, 255, 255, 0) 50.3%, rgba(255, 255, 255, 0) 100%);
    }
 
    .item {
        position: relative;
        flex: 1 1 50%;
        padding: 1rem 1.5rem;
        display: flex;
        flex-direction: column;
    }
 
    .item .year{
        font-weight: bold;
    }
 
    .item:before {
        content: "";
        display: block;
        width: 1rem;
        height: 1rem;
        background: rgba(93, 210, 153, 1);
        background: radial-gradient(circle, rgba(29, 29, 29, 1) 0%, rgba(29, 29, 29, 1) 30%, rgba(121, 121, 121, 1) 50%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
        position: absolute;
    }
 
    .item:nth-child(2n+1) {
        margin-left: 50%;
        align-items: start;
    }
 
    .item:nth-child(2n+1):before {
        left: 0;
        top: 0;
        transform: translate(-.5rem, 1rem) scale(.7);
    }
 
    .active.item:nth-child(2n+1):before {
        transform: translate(-.5rem, 1rem) scale(1);
    }
 
    .item:nth-child(2n+2) {
        margin-right: 50%;
        align-items: end;
    }
 
    .item:nth-child(2n+2):before {
        right: 0;
        top: 0;
        transform: translate(.5rem, 1rem) scale(.7);
    }
 
    .active.item:nth-child(2n+2):before {
        transform: translate(.5rem, 1rem) scale(1);
    }
    </style>
</head>
 
<body>
    <div class="wrapper">
        <div class="item active">
            <div class="year">2011</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, veniam voluptas, ad officiis eius cumque nobis deserunt? Velit explicabo voluptates quo, et quibusdam quasi commodi libero! Quisquam illum perferendis repudiandae!</div>
        </div>
        <div class="item">
            <div class="year">2012</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum obcaecati delectus voluptate, at, atque eius nesciunt sunt eos tempore possimus. Cum, iusto fuga. Odit quos amet sunt veniam, eos facere?</div>
        </div>
        <div class="item">
            <div class="year">2013</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, numquam! Voluptatum aliquam earum ipsa beatae fuga accusantium, neque consectetur praesentium suscipit quae quod dolor, nostrum deserunt iste, numquam rerum fugiat.</div>
        </div>
        <div class="item">
            <div class="year">2014</div>
            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias molestiae natus impedit fuga possimus, voluptas facere praesentium rem deleniti cumque saepe ipsum perferendis. Ratione ex iusto, veritatis tempore vel quibusdam.</div>
        </div>
    </div>
    <script></script>
</body>
 
</html>

@resto8 · 22.09.2021, 18:14

предвигать, расширять, сужать div'ы можно через css-свойства:
margin-left
margin-right
margin-top
margin-bottom
margin

padding-top
padding-bottom
padding-right
padding-left
padding

@FlexKoot · 24.09.2021, 01:26 **[ТС]**

Спасибо большое, очень помогло!

Новые блоги и статьи Все статьи Все блоги /
Коммуникация в реальном времени с SignalR в C# на примере создания чата UnmanagedCoder 17.04.2025 Современный веб стремительно эволюционирует от статичных страниц к динамичным приложениям, где пользователи ожидают мгновенной реакции на свои действия. Представим, что вы отправляете сообщение. . .	Реализация CQRS с MediatR на C# .NET stackOverflow 17.04.2025 Современная разработка программного обеспечения постоянно ищет пути повышения эффективности организации кода. Архитектурные паттерны появляются, эволюционируют, и те, что проявляют свою. . .	Verilog и интеллектуальная собственность - "глазами" обученной LM модели. Hrethgir 17.04.2025 В сети встречаются участники, заявляющие что код на Verilog ни о чём не говорит. Но вот патентная практика на самом деле показывает обратное ими утверждаемому. То-есть код на Verilog включают в. . .	Свап-файл дополнительно к разделу (если вдруг не хватает или не создан) jigi33 17.04.2025 ПОДКЛЮЧЕНИЕ ДОПОЛНИТЕЛЬНОГО SWAP ПРОСТРАНСТВА, Т. О. , РАСШИРЕНИЕ ЕГО РАЗМЕРА В Linux можно использовать как раздел подкачки (swap), так и файл подкачки (swap-файл). Чтобы создать swap-файл вместо. . .	Указатели в Swift: Небезопасные, буферные, необработанные и управляемые указатели mobDevWorks 16.04.2025 Указатели относятся к наиболее сложным и мощным инструментам языка Swift. В своей сути указатель — это переменная, которая хранит адрес участка памяти, где расположены данные, а не сами данные. . . .
Жизненный цикл HTTP-запросов в ASP.NET Core MVC UnmanagedCoder 16.04.2025 Разработка веб-приложений на ASP. NET MVC часто выглядит как простой процесс: получили запрос, обработали его в контроллере, отрендерили представление и отправили ответ пользователю. Однако за этой. . .	Введение в Django: Создаём приложение портфолио py-thonny 16.04.2025 Django – один из самых мощных веб-фреймворков на Python, который позволяет быстро создавать сложные веб-приложения. В отличие от других фреймворков, Django предоставляет богатый набор встроенных. . .	Итераторы в C++: Продвинутые техники использования bytestream 16.04.2025 Итераторы - одна из самых гибких и выразительных концепций в C++, позволяющих абстрагировать обход элементов контейнера от его внутренней реализации. За прошедшие годы они эволюционировали от простых. . .	Обработка естественного языка в Python с помощью spaCy py-thonny 16.04.2025 Обработка естественного языка (Natural Language Processing, NLP) — одна из самых быстрорастущих областей искусственного интеллекта, которая позволяет компьютерам понимать, интерпретировать и. . .	Работа с железом в PHP Laravel с Pinout Jason-Webb 16.04.2025 Граница между программным и аппаратным миром стремительно размывается. Современные веб-приложения уже не ограничиваются цифровым пространством — они активно взаимодействуют с физическими. . .

@resto8 Заблокирован
	22.09.2021, 18:14
	предвигать, расширять, сужать div'ы можно через css-свойства: margin-left margin-right margin-top margin-bottom margin padding-top padding-bottom padding-right padding-left padding 0

@FlexKoot 0 / 0 / 0 Регистрация: 21.11.2019 Сообщений: 5
	24.09.2021, 01:26 [ТС]
	Спасибо большое, очень помогло! 0

Позиционирование текста

Решение