Как выстроить контент нужным образом?

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

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

Перепробовал все свойства флекса, но не могу поставить параграфы в 2 ряда по 3 штуки

HTML5
1
2
3
4
5
6
7
8
9
10
11
<section>
            <h1 class="services">Our services</h1>
            <h6 class="lor">Lorem Ipsum is simply dummy Bussines industry</h6>
            <div class="serv">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting ind
            ustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
            <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will un cover many web sites still in their infancy</p>
            <p>Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham</p>
            <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour or randomised words which don't look even slightly believable.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>

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
section {
    padding-top:180px;
}
 
.services {
    text-transform: uppercase;
    font-weight: 900;
    font-size:34px;
    margin-bottom:-40px;
 
}
 
.lor {
    font-weight: 300;
    font-size:17px;
}
 
.services, .lor {
    text-align: center;
    font-family: 'Arial';
    color:#394b50;
}
 
.serv {
    margin: 0 auto;
    width:1170px;
    display:flex 
 
}

@Cheeeasy2501 · 18.10.2019, 10:23

Nait1336,
Можно проще на гридах выстроить

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section>
            <h1 class="services">Our services</h1>
            <h6 class="lor">Lorem Ipsum is simply dummy Bussines industry</h6>
             <div class="serv">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting ind
            ustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
         
            <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will un cover many web sites still in their infancy</p></>
            <p>Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham</p>
            <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy</p>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour or randomised words which don't look even slightly believable.</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
              </div>
</section>

CSS
1
2
3
4
5
6
.serv
{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-gap:32px;
}

@Nait1336 · 18.10.2019, 10:27 **[ТС]**

Вообщем-то флекс тут и не должен помогать, просто не знаю как сделать..
пробовал еще так но тоже не помогло(высота стоит 100vh , но параграфы делают вид , что не влезают)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
                    <div class="serv">
            <div class="odin">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting ind
            ustry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.</p>
            </div>
            <div class="dva">
            <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will un cover many web sites still in their infancy</p>
            </div>
            <div class="tri">
            <p>Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham</p>
            </div>  
            </div>
[CSS].serv {
    width:1170px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
[/CSS]

@Cheeeasy2501 · 18.10.2019, 10:40

Nait1336, выше я написал на гридах, если нужно на флексах , то как я понимаю нужно или две колонки делать, или 3 строки и отступы указать между ними

@Nait1336 · 18.10.2019, 10:51 **[ТС]**

Cheeeasy2501, всё работает спасибо!

@Nait1336 · 18.10.2019, 10:58 **[ТС]**

Cheeeasy2501, Не подскажите еще, как отступ сократить между параграфами?

@Cheeeasy2501 · 18.10.2019, 11:15

Nait1336,
Здесь вы строите колонки, т.е. сейчас повторяет 2 колонки, по 1 fr. Вместо 1fr можете указывать другие единицы измерения.

CSS
1
grid-template-columns:repeat(2,1fr);

Это отступы между самой сеткой, можно отдельно давать между столбца или строками с помощью grid-column-gap и grid-row-gap

CSS
1
  grid-gap:32px;

@Cheeeasy2501 · 18.10.2019, 11:20

Nait1336, Вроде бы всё правильно работает. Может быть у вас ещё какой код отступы даёт? просто 1fr - это как одинаковые поля, размер будет принимать самого большого из всех

@Nait1336 · 18.10.2019, 14:16 **[ТС]**

Cheeeasy2501, min-height стоял

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	18.10.2019, 10:40
	Nait1336, выше я написал на гридах, если нужно на флексах , то как я понимаю нужно или две колонки делать, или 3 строки и отступы указать между ними 0

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	18.10.2019, 10:51 [ТС]
	Cheeeasy2501, всё работает спасибо! 0

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	18.10.2019, 10:58 [ТС]
	Cheeeasy2501, Не подскажите еще, как отступ сократить между параграфами? 0

@Cheeeasy2501 38 / 27 / 12 Регистрация: 13.09.2019 Сообщений: 126
	18.10.2019, 11:20
	Nait1336, Вроде бы всё правильно работает. Может быть у вас ещё какой код отступы даёт? просто 1fr - это как одинаковые поля, размер будет принимать самого большого из всех Миниатюры 1

@Nait1336 -7 / 2 / 2 Регистрация: 03.12.2018 Сообщений: 182
	18.10.2019, 14:16 [ТС]
	Cheeeasy2501, min-height стоял 0

Как выстроить контент нужным образом?

Решение