X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Ширина блока div относительно размера страницы
Multilimon
Multilimon
Topic Starter сообщение 17.2.2018, 20:57; Ответить: Multilimon
Сообщение #1


Здравствуйте!

Подскажите пожалуйста, на странице в несколько рядов, размещено по 100 картинок в каждом ряду, примыкающих друг к другу. Картинки размером 10х10.

При уменьшении размера экрана часть картинкок раньше перескакивали с своего ряда на нижний, подстраиваясь под размер экрана.

Мне нужно было, чтобы при уменьшении размера экрана, количество картинок в одном ряду не уменьшалось, а оставалось строго 100 картинок в каждом ряду.

Эту проблему я решил, добавлением в стили CSS, блока: 

#boxShadowtext {

  width: 100%;

  max-width: 1030px;

min-width: 1030px;

  margin: 1em auto;

  padding: 1em;

  border-radius: 10px;

  background: rgb(255,245,237) radial-gradient(circle at 50% , rgba(255,255,255,.65),           rgba(255,255,255,.35));

  box-shadow:

   inset rgba(0,0,0,.6) 0 -3px 8px,

   inset rgba(252,255,255,.7) 0 3px 8px,

   rgba(0,0,0,.8) 0 3px 8px -3px;

}

 

И с помощью <div id="boxShadowtext"> упаковал все картинки на странице в этот блок с уже строго заданными размерами по ширине 1030px; 

 

Теперь количество картинок в каждом ряду по 100 зафиксировано блоком boxShadowtext, но при уменьшении размера экрана блок boxShadowtext вместе с картинками в нем вылазит за пределы экрана, страница эта: http://kartinki.rabotavinternet.net или вот скрин выходящего блока за пределы сайта при уменьшении экрана: http://ibb.co/mvyxi7

 

Вопрос: Как можно сделать, чтобы блок boxShadowtext с картинками расположенными в нём, автоматически уменьшался в размерах, под разные размеры экрана,  но чтобы количество картинок при этом в ряду не уменьшалось и оставалось равное 100 шт? То есть, чтобы сам блок с содержимым просто уменьшался в размерах при уменьшении экрана.

 

Заранее спасибо за ответ.

 

0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 17.2.2018, 22:00; Ответить: fedornabilkin
Сообщение #2



overflow-x: scroll;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Multilimon
Multilimon
Topic Starter сообщение 17.2.2018, 22:15; Ответить: Multilimon
Сообщение #3


Спасибо за ответ, но не получилось, все картинки 600 шт. выстроились в один ряд, и появилась горизонтальная полоса прокрурки, вот так: http://kartinki.rabotavinternet.net/пробная-3/ и при уменьшении размера экрана сам блок тоже не уменьшается в соотношении с меньшим разрешением..
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 17.2.2018, 22:55; Ответить: yury_mw
Сообщение #4


(Multilimon @ 17.2.2018, 23:57) *
Мне нужно было, чтобы при уменьшении размера экрана, количество картинок в одном ряду не уменьшалось, а оставалось строго 100 картинок в каждом ряду.


Правилом css задаете размер картинки в 1/100 ширины родителя (в примере это блок с классом images):


.images img{
  float: left;
  width: 1%;
 }

Результат см в песочнице:

https://jsfiddle.net/qodgzd8d/


Сообщение отредактировал yury - 17.2.2018, 22:59
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Multilimon
Multilimon
Topic Starter сообщение 17.2.2018, 23:43; Ответить: Multilimon
Сообщение #5


yury_mw, спасибо огромное :D , всё получилось. :smile-thumb-up:


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужно ли закрывать ненужные страницы тегом noindex, follow?
8 noviktamw 2833 2.3.2024, 12:53
автор: toplinks
Открытая тема (нет новых ответов) Вытащить страницы из кэша Яндекса
2 VostrVL 1913 11.1.2024, 23:07
автор: ЛаврионСергеевич
Открытая тема (нет новых ответов) Моя div-ная верстка соответствует ли стандартам
Хотелось бы конструктивной критики
10 muratastana 1545 14.1.2023, 1:16
автор: xweb
Открытая тема (нет новых ответов) Сверстать страницы из figma
нужно сделать страницы для веб приложения
1 bluestorm 1285 7.6.2022, 18:11
автор: doharddocode
Открытая тема (нет новых ответов) Подобрать группы и страницы и разместить ссылку
4 Lacomka 3389 21.2.2022, 8:43
автор: АлексейWEB


 



RSS Текстовая версия Сейчас: 28.3.2024, 19:22
Дизайн