1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Решено] Ширина блока div относительно размера страницы

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Multilimon, 17 фев 2018.

Статус темы:
Закрыта.
  1. Multilimon

    Multilimon

    Регистрация:
    17 фев 2018
    Сообщения:
    2
    Симпатии:
    0
    Здравствуйте!

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

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

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Для начала нужно убрать эти размеры. У вас картинки имеют фиксированные значения размера, так что никакие манипуляции с внешними блоками не заствят их уменьшаться. А уменьшаться они должны, если вы хотите, чтоб они вмещались по 100 в ряд на любом экране.
     
  3. Multilimon

    Multilimon

    Регистрация:
    17 фев 2018
    Сообщения:
    2
    Симпатии:
    0
    Спасибо за ответ.
    Решение уже найдено.
    Правилом css нужно задать размер картинки в 1/100 ширины родителя:

    images img{
    float: left;
    width: 1%;
    }
     
Статус темы:
Закрыта.