Автор Тема: Ширина блока div относительно размера страницы  (Прочитано 940 раз)

17 Февраль, 2018, 20:55:54

Оффлайн Multilimon

  • Школьник
  • *
  • Сообщений: 1
  • Репутация: 0
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Chrome 64.0.3282.140 Chrome 64.0.3282.140
    • Просмотр профиля
Здравствуйте!

Подскажите пожалуйста, на странице в несколько рядов, размещено по 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 шт? То есть, чтобы сам блок с содержимым просто уменьшался в размерах при уменьшении экрана.

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

Форум вебмастеров - Webmasters.BY


19 Февраль, 2018, 14:07:08
Ответ #1

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4940
  • Репутация: 112
  • Шииикарно!
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Firefox 58.0 Firefox 58.0
    • Просмотр профиля
тут всё просто, не указывайте размеры в пикселях. укажите для блока ширину 100%, а для картинок 1%.

19 Февраль, 2018, 14:25:22
Ответ #2

Оффлайн vladkristsun

  • Школьник
  • *
  • Сообщений: 9
  • Репутация: 0
  • OS: Linux (Ubuntu) Linux (Ubuntu)
  • Browser: Chrome 64.0.3282.140 Chrome 64.0.3282.140
    • Просмотр профиля
Можно ещё попробовать такой вариант: каждому div,  в котором находится отдельный ряд картинок в CSS задать display: flex. И всё, картинки не будут перескакивать на следующую строку, и будут уменьшаться в размерах при уменьшении экрана.
Качественный хостинг от https://uh.ua/