Адапиность

@jhiugh1i1 · Регистрация: 18.05.2019

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

Мне надо сделать что бы в ряд были 6 фото и всего таких 2 радя.

1) Как можно убрать прокрутку у страницы мол эти фото вылезают за границы? Задавая свою ширину он ее игнорирует.

2) Если при адаптиве добавить перенос(wrap) при переполнение то появляются белые полоски как можно сделать так что бы белых полосок небыло или же что бы при уменьшение экрана фото уходили за граници страницы НО не ломая верстку и потом его уже убирать при помощи display: none?

@novichek_1905 · 16.01.2020, 23:24

CSS
1
2
3
4
5
6
7
8
9
10
11
body {
  width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
body img {
  max-width: 100%;
  height: 200px;
  object-fit: cover;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
  <img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
<img src="https://cdn.igromania.ru/mnt/news/5/b/a/a/0/e/88164/db4c1c99c06a1bab_1920xH.jpg" alt="">
</body>

@jhiugh1i1 · 17.01.2020, 00:38 **[ТС]**

Идея вроде да правильная(при уменьшение экрана фото за него закатывается НО в коде это ламает верстку) но возможно я что то не так понял в вашем коде или же код неудачно сработал

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<section class="section gallery">
      <div class="photos gallery__photos">
        <img src="img/gallery/gal_1.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_2.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_3.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_4.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_5.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_6.jpg" alt="" class="bread gallery__photos-1">
      </div>
      <div class="photos gallery__photos">
        <img src="img/gallery/gal_7.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_8.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_9.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_10.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_11.jpg" alt="" class="bread gallery__photos-1">
        <img src="img/gallery/gal_12.jpg" alt="" class="bread gallery__photos-1">
      </div>
    </section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.gallery
  font-size: 0
  width: 960px
  margin: 0 auto
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
  &__photos
    display: flex
.bread
  max-width: 100%
  height: 200px
  object-fit: cover

@jhiugh1i1 · 17.01.2020, 00:38 **[ТС]**

При уменьшение экрана

Андрей100 · 17.01.2020, 01:49

скачать пример в архиве адаптивный в 2 ряда по 6 фото
не вылезают за границы это задаётся max-width:1700px;
максимальная ширина экрана измените если не по 6 фото в ряде

@jhiugh1i1 · 17.01.2020, 02:11 **[ТС]**

Тогда в этом случие не слюблюдаются условия которыя мне нужны

1) Что бы при уменьшение экрана фотки сохранялись в 2 ряда
2) Что бы верстка не ломалась и не было белых линий

Андрей100 · 17.01.2020, 03:14

скачать пример в архиве

при уменьшение также при прибавлении экрана фотки сохраняются в 2 ряда по 6 фоток,без белых линий
для этого использовано % если хотите посмотреть код в архиве файл главная открыть блокнотом
а напрямую запустится сайт

@novichek_1905 · 17.01.2020, 13:31

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

о возможно я что то не так понял в вашем коде или же код неудачно сработал

а зачем там блоки типа photos gallery__photos, выводите все простынкой, и будет вас счастье.

@jhiugh1i1 · 17.01.2020, 16:41 **[ТС]**

Всмемлы простынкой? Если я ввиду вас код простынкой то даже не проверяя его он все поломает мне эти классы (photos gallery__photos) нужны как раз для того что бы свойства конкретно им задавать. Я не могу всему body прописать width 960px к примеру как вы говорили так как у меня есть там контейнер который как 1000px и вы по центру выравнивает что бы все инфа сайта была по середине. И это просто не возмонжно будет радителя сделать меньше чем сам дочерний элемент

@novichek_1905 · 17.01.2020, 17:06

jhiugh1i1, кажется вы вообще не понимаете... Не смотрите на body, из моего примера вам нужны только вот это:

CSS
1
2
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

зачем у вас повторяются .photos gallery__photos, мне не очевидно, если избавиться от неё, вывести ваши изображения, только в одном, и присвоить мой css выше, то есть избавиться от двух строк, что бы блоки "перетикали". Почему так нельзя?

@jhiugh1i1 · 17.01.2020, 17:53 **[ТС]**

Хорошо, правильно ли я понял вас щас.
Во так вы имели в виду?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <section class="section gallery">
      <div class="gallery__photos">
        <img src="img/gallery/gal_1.jpg" alt="" class="bread">
        <img src="img/gallery/gal_2.jpg" alt="" class="bread">
        <img src="img/gallery/gal_3.jpg" alt="" class="bread">
        <img src="img/gallery/gal_4.jpg" alt="" class="bread">
        <img src="img/gallery/gal_5.jpg" alt="" class="bread">
        <img src="img/gallery/gal_6.jpg" alt="" class="bread">
      </div>
      <div class="gallery__photos">
        <img src="img/gallery/gal_7.jpg" alt="" class="bread">
        <img src="img/gallery/gal_8.jpg" alt="" class="bread">
        <img src="img/gallery/gal_9.jpg" alt="" class="bread">
        <img src="img/gallery/gal_10.jpg" alt="" class="bread">
        <img src="img/gallery/gal_11.jpg" alt="" class="bread">
        <img src="img/gallery/gal_12.jpg" alt="" class="bread">
      </div>
    </section>

CSS
1
2
3
4
5
6
7
8
9
10
.gallery
  font-size: 0
  display: grid
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
  &__photos
    display: flex
.bread
  max-width: 100%
  height: 200px
  object-fit: cover

@D_Vik · 17.01.2020, 18:02

Он имеет ввиду что у вас должен быть 1 блок gallery__photos с 12 картинками внутри а не два блока gallery__photos по 6 картинок.

@jhiugh1i1 · 17.01.2020, 18:11 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <section class="section gallery">
        <div class="gallery__photos">
          <img src="img/gallery/gal_1.jpg" alt="" class="bread">
          <img src="img/gallery/gal_2.jpg" alt="" class="bread">
          <img src="img/gallery/gal_3.jpg" alt="" class="bread">
          <img src="img/gallery/gal_4.jpg" alt="" class="bread">
          <img src="img/gallery/gal_5.jpg" alt="" class="bread">
          <img src="img/gallery/gal_6.jpg" alt="" class="bread">
          <img src="img/gallery/gal_7.jpg" alt="" class="bread">
          <img src="img/gallery/gal_8.jpg" alt="" class="bread">
          <img src="img/gallery/gal_9.jpg" alt="" class="bread">
          <img src="img/gallery/gal_10.jpg" alt="" class="bread">
          <img src="img/gallery/gal_11.jpg" alt="" class="bread">
          <img src="img/gallery/gal_12.jpg" alt="" class="bread">
        </div>
      </section>

Вот исправленый код и результат
С css указаным выше

@jhiugh1i1 · 17.01.2020, 18:11 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <section class="section gallery">
        <div class="gallery__photos">
          <img src="img/gallery/gal_1.jpg" alt="" class="bread">
          <img src="img/gallery/gal_2.jpg" alt="" class="bread">
          <img src="img/gallery/gal_3.jpg" alt="" class="bread">
          <img src="img/gallery/gal_4.jpg" alt="" class="bread">
          <img src="img/gallery/gal_5.jpg" alt="" class="bread">
          <img src="img/gallery/gal_6.jpg" alt="" class="bread">
          <img src="img/gallery/gal_7.jpg" alt="" class="bread">
          <img src="img/gallery/gal_8.jpg" alt="" class="bread">
          <img src="img/gallery/gal_9.jpg" alt="" class="bread">
          <img src="img/gallery/gal_10.jpg" alt="" class="bread">
          <img src="img/gallery/gal_11.jpg" alt="" class="bread">
          <img src="img/gallery/gal_12.jpg" alt="" class="bread">
        </div>
      </section>

Вот исправленый код и результат
С css указаным выше
Вложение 1104835

@D_Vik · 17.01.2020, 18:28

Новичёк же написал как это будет выглядеть в css :

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.gallery{
  max-width: 960px;
  margin: 0 auto;
}
.gallery__photos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
 
.bread{
  width: 100%;
}

Добавлено через 6 минут
Но так как 960px не делится на 6 частей по 200px минимальную ширину картинки нужно задать 160px, что бы в ряд залезли 6 картинок.

@jhiugh1i1 · 17.01.2020, 18:36 **[ТС]**

Тоесть вот так имелось ввиду?
.gallery{
max-width: 960px;
margin: 0 auto;
}
.gallery__photos{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.bread{
min-width: 160px;
}

@D_Vik · 17.01.2020, 18:39

CSS
1
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

Это оставьте как было :

CSS
1
2
3
.bread{
  width: 100%;
}

@jhiugh1i1 · 17.01.2020, 18:52 **[ТС]**

При уменьшение все прекрасно но при изначальном разрешение они не заполняют всю страницу.

Вот так как то надо

@jhiugh1i1 · 17.01.2020, 18:53 **[ТС]**

При уменьшение все прекрасно но при изначальном разрешение они не заполняют всю страницу.
Вложение 1104838

Вот так как то надо
Вложение 1104839

@D_Vik · 17.01.2020, 18:58

Потому что общий контейнер ограничен фиксированной шириной 960px , дайте ему больше места.

Новые блоги и статьи Все статьи Все блоги /
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

Адапиность

Решение

Решение

@jhiugh1i1 1 / 1 / 0 Регистрация: 18.05.2019 Сообщений: 94

	Адапиность 16.01.2020, 18:39. Показов 4203. Ответов 22 Метки css3, html5 (Все метки) Мне надо сделать что бы в ряд были 6 фото и всего таких 2 радя. 1) Как можно убрать прокрутку у страницы мол эти фото вылезают за границы? Задавая свою ширину он ее игнорирует. 2) Если при адаптиве добавить перенос(wrap) при переполнение то появляются белые полоски как можно сделать так что бы белых полосок небыло или же что бы при уменьшение экрана фото уходили за граници страницы НО не ломая верстку и потом его уже убирать при помощи display: none? 0

@jhiugh1i1 1 / 1 / 0 Регистрация: 18.05.2019 Сообщений: 94
	17.01.2020, 00:38 [ТС]
	При уменьшение экрана 0

@jhiugh1i1 1 / 1 / 0 Регистрация: 18.05.2019 Сообщений: 94
	17.01.2020, 02:11 [ТС]
	Тогда в этом случие не слюблюдаются условия которыя мне нужны 1) Что бы при уменьшение экрана фотки сохранялись в 2 ряда 2) Что бы верстка не ломалась и не было белых линий 0

@jhiugh1i1 1 / 1 / 0 Регистрация: 18.05.2019 Сообщений: 94
	17.01.2020, 16:41 [ТС]
	Всмемлы простынкой? Если я ввиду вас код простынкой то даже не проверяя его он все поломает мне эти классы (photos gallery__photos) нужны как раз для того что бы свойства конкретно им задавать. Я не могу всему body прописать width 960px к примеру как вы говорили так как у меня есть там контейнер который как 1000px и вы по центру выравнивает что бы все инфа сайта была по середине. И это просто не возмонжно будет радителя сделать меньше чем сам дочерний элемент 0

@D_Vik 368 / 234 / 68 Регистрация: 19.07.2016 Сообщений: 833
	17.01.2020, 18:02
	Он имеет ввиду что у вас должен быть 1 блок gallery__photos с 12 картинками внутри а не два блока gallery__photos по 6 картинок. 0

@jhiugh1i1 1 / 1 / 0 Регистрация: 18.05.2019 Сообщений: 94
	17.01.2020, 18:36 [ТС]
	Тоесть вот так имелось ввиду? .gallery{ max-width: 960px; margin: 0 auto; } .gallery__photos{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .bread{ min-width: 160px; } 0

@jhiugh1i1 1 / 1 / 0 Регистрация: 18.05.2019 Сообщений: 94
	17.01.2020, 18:52 [ТС]
	При уменьшение все прекрасно но при изначальном разрешение они не заполняют всю страницу. Вот так как то надо 0

@jhiugh1i1 1 / 1 / 0 Регистрация: 18.05.2019 Сообщений: 94
	17.01.2020, 18:53 [ТС]
	При уменьшение все прекрасно но при изначальном разрешение они не заполняют всю страницу. Вложение 1104838 Вот так как то надо Вложение 1104839 0

@D_Vik 368 / 234 / 68 Регистрация: 19.07.2016 Сообщений: 833
	17.01.2020, 18:58
	Потому что общий контейнер ограничен фиксированной шириной 960px , дайте ему больше места. 1