Позиционирование

@axela002 · Регистрация: 12.03.2017

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

Добрый день всем, такой вопрос, верстаю отдел сайта,я верстаю на своём ноуте, тут разрешение не большое, реализовывал через flexbox., и тут такая проблема ... я открыл свой сайт на компе с разрешением больше и все эти элементы стали по центру как я центрировал, но появились отступы по бокам..а нужно чтобы 4 элемента были на всю ширину экрана..
на скрине ниже экран большого компа и моего ноута..
Подскажите, что я не так сделал?

@AlexZaw · 01.11.2018, 15:30

Без кода можно только гадать... Либо вы задали фиксированные размеры, либо у вас есть контейнер ограничивающий ширину, либо еще что-то...

@axela002 · 01.11.2018, 16:37 **[ТС]**

Сообщение от AlexZaw

Без кода можно только гадать... Либо вы задали фиксированные размеры, либо у вас есть контейнер ограничивающий ширину, либо еще что-то...

а да, извините забыл.
html разметка

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
39
40
41
<section id="sectionThree">
 
    
        
 
    <div class="list-container-one">
        
        <div class="items item_1">
            
        <div class="container_item_1">
            
        <h3>Jan 4, 2016 | In Culture</h3>
        <h2>akita inu dog</h2>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur </p>
 
        </div>
 
        </div>
        <div class="items"><img src="images/3.1.jpg" alt=""></div>
        <div class="items"><img src="images/3.2.jpg" alt=""></div>
        <div class="items item_2">
            
    <div class="container_item_2">
            
        <h3>Jan 4, 2016 | In Culture</h3>
        <h2>akita inu dog</h2>
        <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        <p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur </p>
 
        </div>
 
        </div>
 
 
    </div>
 
 
 
 
    </section>

CSS код

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
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
#sectionThree .items {
    width: 673px;
 
}
 
#sectionThree .item_1 {
    background-color: #222222;
}
 
#sectionThree .item_2 {
    background-color: #fff;
}
 
 
#sectionThree .list-container-one {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
 
 
}
 
#sectionThree .list-container-one .container_item_1 {
    width: 450px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    padding-top: 60px;
}
 
#sectionThree .list-container-one .container_item_1 h3 {
    font-family: Myriad Pro Regular ,sans-serif;
    font-size: 13px;
    color:#fff;
    
}
 
#sectionThree .list-container-one .container_item_1 h2 {
    font-family: Myriad Pro Regular ,sans-serif;
    font-size: 25px;
    color:#fff;
    text-transform: uppercase;
    padding-bottom: 10px;
 
}
#sectionThree .list-container-one .container_item_1 p {
    font-family: Myriad Pro Regular ,sans-serif;
    font-size: 15px;
    color:#fff;
    text-align: left;
 
}
 
#sectionThree .list-container-one .container_item_1 p:last-child {
    padding-top: 20px;
}
 
 
 
#sectionThree .list-container-one .container_item_2 {
    width: 500px;
    margin: 0 auto;
    position: relative;
    text-align: left;
    padding-top: 60px;
}
 
#sectionThree .list-container-one .container_item_2 h3 {
    font-family: Myriad Pro Regular ,sans-serif;
    font-size: 13px;
    color:#000;
    
}
 
#sectionThree .list-container-one .container_item_2 h2 {
    font-family: Myriad Pro Regular ,sans-serif;
    font-size: 25px;
    color:#000;
    text-transform: uppercase;
    padding-bottom: 10px;
    font-weight: 600;
 
}
#sectionThree .list-container-one .container_item_2 p {
    font-family: Myriad Pro Regular ,sans-serif;
    font-size: 15px;
    color:#000;
    text-align: left;
 
}
 
#sectionThree .list-container-one .container_item_2 p:last-child {
    padding-top: 20px;
}

Добавлено через 54 секунды

Сообщение от AlexZaw

Либо вы задали фиксированные размеры

У меня у блока item где контент стоит размер 673px, а как его поставить чтобы он адаптировался типо в %?

@gogolik · 01.11.2018, 16:45

axela002, width: 50%;, как вариант.

@axela002 · 01.11.2018, 17:03 **[ТС]**

Сообщение от gogolik

width: 50%;, как вариант.

Проблема решилась с блоками в которых текст, а блоки с картинками, там получается вот так.
Я так понимаю картинку нужно не в html разметке вставлять , а задавать как задний фон блока?

@axela002 · 01.11.2018, 17:11 **[ТС]**

Всем спасибо решил проблему.
Решение:
Сделал ширину в % (50%).
Блоки с изображениями сделал так: изображения указала в css, как задний фон, а не добавлял images в html разметку

@gogolik · 01.11.2018, 17:26

axela002, для img можно добавить object-fit: cover;.

@axela002 · 01.11.2018, 17:59 **[ТС]**

Сообщение от gogolik

для img можно добавить

А спасибо, не знал о таком свойстве.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .

@axela002 71 / 58 / 48 Регистрация: 12.03.2017 Сообщений: 563

	Позиционирование 01.11.2018, 15:12. Показов 1831. Ответов 7 Метки позиционирование (Все метки) Добрый день всем, такой вопрос, верстаю отдел сайта,я верстаю на своём ноуте, тут разрешение не большое, реализовывал через flexbox., и тут такая проблема ... я открыл свой сайт на компе с разрешением больше и все эти элементы стали по центру как я центрировал, но появились отступы по бокам..а нужно чтобы 4 элемента были на всю ширину экрана.. на скрине ниже экран большого компа и моего ноута.. Подскажите, что я не так сделал? Миниатюры 0

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	01.11.2018, 15:30
	Без кода можно только гадать... Либо вы задали фиксированные размеры, либо у вас есть контейнер ограничивающий ширину, либо еще что-то... 0

@gogolik Супер-модератор 3952 / 2061 / 829 Регистрация: 13.03.2010 Сообщений: 6,782
	01.11.2018, 16:45
	Сообщение было отмечено axela002 как решение Решение axela002, `width: 50%;`, как вариант. 1

@axela002 71 / 58 / 48 Регистрация: 12.03.2017 Сообщений: 563
	01.11.2018, 17:11 [ТС]
	Всем спасибо решил проблему. Решение: Сделал ширину в % (50%). Блоки с изображениями сделал так: изображения указала в css, как задний фон, а не добавлял images в html разметку 0

@gogolik Супер-модератор 3952 / 2061 / 829 Регистрация: 13.03.2010 Сообщений: 6,782
	01.11.2018, 17:26
	Сообщение было отмечено axela002 как решение Решение axela002, для img можно добавить `object-fit: cover;`. 1