Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.73/15: Рейтинг темы: голосов - 15, средняя оценка - 4.73
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
1

Адапиность

16.01.2020, 18:39. Показов 2934. Ответов 22

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

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

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

Адапиность
0
468 / 333 / 144
Регистрация: 16.02.2018
Сообщений: 930
16.01.2020, 23:24 2
Лучший ответ Сообщение было отмечено jhiugh1i1 как решение

Решение

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>
1
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 00:38  [ТС] 3
Идея вроде да правильная(при уменьшение экрана фото за него закатывается НО в коде это ламает верстку) но возможно я что то не так понял в вашем коде или же код неудачно сработал

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
0
Миниатюры
Адапиность  
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 00:38  [ТС] 4
При уменьшение экрана
Адапиность
0
-77 / 22 / 10
Регистрация: 15.11.2018
Сообщений: 158
17.01.2020, 01:49 5
скачать пример в архиве адаптивный в 2 ряда по 6 фото
не вылезают за границы это задаётся max-width:1700px;
максимальная ширина экрана измените если не по 6 фото в ряде
0
Вложения
Тип файла: zip 000.zip (11.2 Кб, 3 просмотров)
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 02:11  [ТС] 6
Тогда в этом случие не слюблюдаются условия которыя мне нужны
Адапиность

1) Что бы при уменьшение экрана фотки сохранялись в 2 ряда
2) Что бы верстка не ломалась и не было белых линий
0
-77 / 22 / 10
Регистрация: 15.11.2018
Сообщений: 158
17.01.2020, 03:14 7
скачать пример в архиве

при уменьшение также при прибавлении экрана фотки сохраняются в 2 ряда по 6 фоток,без белых линий
для этого использовано % если хотите посмотреть код в архиве файл главная открыть блокнотом
а напрямую запустится сайт
0
Вложения
Тип файла: zip 999.zip (11.3 Кб, 3 просмотров)
468 / 333 / 144
Регистрация: 16.02.2018
Сообщений: 930
17.01.2020, 13:31 8
Цитата Сообщение от jhiugh1i1 Посмотреть сообщение
о возможно я что то не так понял в вашем коде или же код неудачно сработал
а зачем там блоки типа photos gallery__photos, выводите все простынкой, и будет вас счастье.
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 16:41  [ТС] 9
Всмемлы простынкой? Если я ввиду вас код простынкой то даже не проверяя его он все поломает мне эти классы (photos gallery__photos) нужны как раз для того что бы свойства конкретно им задавать. Я не могу всему body прописать width 960px к примеру как вы говорили так как у меня есть там контейнер который как 1000px и вы по центру выравнивает что бы все инфа сайта была по середине. И это просто не возмонжно будет радителя сделать меньше чем сам дочерний элемент
0
468 / 333 / 144
Регистрация: 16.02.2018
Сообщений: 930
17.01.2020, 17:06 10
jhiugh1i1, кажется вы вообще не понимаете... Не смотрите на body, из моего примера вам нужны только вот это:
CSS
1
2
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
зачем у вас повторяются .photos gallery__photos, мне не очевидно, если избавиться от неё, вывести ваши изображения, только в одном, и присвоить мой css выше, то есть избавиться от двух строк, что бы блоки "перетикали". Почему так нельзя?
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 17:53  [ТС] 11
Хорошо, правильно ли я понял вас щас.
Во так вы имели в виду?

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
0
356 / 226 / 64
Регистрация: 19.07.2016
Сообщений: 803
17.01.2020, 18:02 12
Он имеет ввиду что у вас должен быть 1 блок gallery__photos с 12 картинками внутри а не два блока gallery__photos по 6 картинок.
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 18:11  [ТС] 13
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 указаным выше
Адапиность
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 18:11  [ТС] 14
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
0
356 / 226 / 64
Регистрация: 19.07.2016
Сообщений: 803
17.01.2020, 18:28 15
Лучший ответ Сообщение было отмечено jhiugh1i1 как решение

Решение

Новичёк же написал как это будет выглядеть в 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 картинок.
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 18:36  [ТС] 16
Тоесть вот так имелось ввиду?
.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
356 / 226 / 64
Регистрация: 19.07.2016
Сообщений: 803
17.01.2020, 18:39 17
CSS
1
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
Это оставьте как было :

CSS
1
2
3
.bread{
  width: 100%;
}
0
0 / 0 / 0
Регистрация: 18.05.2019
Сообщений: 84
17.01.2020, 18:52  [ТС] 18
При уменьшение все прекрасно но при изначальном разрешение они не заполняют всю страницу.
Адапиность


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

Вот так как то надо
Вложение 1104839
0
356 / 226 / 64
Регистрация: 19.07.2016
Сообщений: 803
17.01.2020, 18:58 20
Потому что общий контейнер ограничен фиксированной шириной 960px , дайте ему больше места.
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.