Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.10.2017, 20:58   #1
Рафаиил
Пользователь
 
Регистрация: 02.05.2013
Сообщений: 11
По умолчанию Возможно ли сделать так, чтобы при уменьшении размера экрана .block2 не перепрыгивал вниз, а уменьшался в размерах?

Добрый вечер! Подскажите возможно ли сделать так, чтобы при уменьшении размера экрана .block2 не перепрыгивал вниз, а уменьшался в размерах?

Код:

Код:
<html>

<head>
    <style>
        .block1 {
            background: red;
            width: 300px;
            height: 500px;
            float: left;
        }
        
        .block2 {
            background: blue;
            max-width: 700px;
            height: 500px;
            float: left;
        }
        
        .items {
            width: 100px;
            height: 100px;
            background: green;
            margin: 10px;
            float: left;
        }

    </style>
</head>

<body>
    <div class="block1"></div>
    <div class="block2">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>

    </div>
</body>

</html>
Пожалуйста, оформляйте Ваш код согласно правилам.

Последний раз редактировалось Вадим Мошев; 19.10.2017 в 18:22.
Рафаиил вне форума Ответить с цитированием
Старый 19.10.2017, 16:53   #2
gryllus
Пользователь
 
Регистрация: 27.08.2017
Сообщений: 99
По умолчанию

Можно, почитайте про медиа-запросы(@media) CSS3 сейчас поддерживается практически всеми браузерами свежих версий http://htmlbook.ru/css/value/media.
gryllus вне форума Ответить с цитированием
Старый 19.10.2017, 18:36   #3
Рафаиил
Пользователь
 
Регистрация: 02.05.2013
Сообщений: 11
По умолчанию

Цитата:
Сообщение от gryllus Посмотреть сообщение
Можно, почитайте про медиа-запросы(@media) CSS3 сейчас поддерживается практически всеми браузерами свежих версий http://htmlbook.ru/css/value/media.
Не совсем понял как это реализовать медиа-запросами. Мне нужно чтобы .block1 был прижат к левому краю, а .block 2 был динамическим(резиновым, адаптивным) и при этом оставался на уровне .block1. Допустим .block1 это сайдбар а .block2 это контент, который не имеет строгой ширины(ограничен только максимальной шириной, но не ограничен минимальной) и может сжиматься практически до 0. Надеюсь понятно объяснил
Рафаиил вне форума Ответить с цитированием
Старый 20.10.2017, 11:12   #4
gryllus
Пользователь
 
Регистрация: 27.08.2017
Сообщений: 99
По умолчанию

Цитата:
Мне нужно чтобы .block1 был прижат к левому краю, а .block 2 был динамическим(резиновым, адаптивным) и при этом оставался на уровне .block1.
Доброго дня!

Если у вас сейчас всё сделано так как вам угодно, но не хватает только адаптивности, то медиа-запросы(@media) вам в этом помогут. Если вы с ними не сталкивались, то я постараюсь вас просветить.
У вас все блоки обтекаются справа, а какой там контент (текстом или то же блочными элементами)?
gryllus вне форума Ответить с цитированием
Старый 20.10.2017, 17:29   #5
Рафаиил
Пользователь
 
Регистрация: 02.05.2013
Сообщений: 11
По умолчанию

Цитата:
Сообщение от gryllus Посмотреть сообщение
Можно, почитайте про медиа-запросы(@media) CSS3 сейчас поддерживается практически всеми браузерами свежих версий http://htmlbook.ru/css/value/media.
Не совсем понял как это реализовать медиа-запросами. Мне нужно чтобы .block1 был прижат к левому краю, а .block 2 был динамическим(резиновым, адаптивным) и при этом оставался на уровне .block1. Допустим .block1 это сайдбар а .block2 это контент, который не имеет строгой ширины(ограничен только максимальной шириной, но не ограничен минимальной) и может сжиматься практически до 0. Надеюсь понятно объяснил
Цитата:
Сообщение от gryllus Посмотреть сообщение
Доброго дня!

Если у вас сейчас всё сделано так как вам угодно, но не хватает только адаптивности, то медиа-запросы(@media) вам в этом помогут. Если вы с ними не сталкивались, то я постараюсь вас просветить.
У вас все блоки обтекаются справа, а какой там контент (текстом или то же блочными элементами)?
Дорого дня!
Постараюсь еще раз объяснить чего хочу добиться.На большом дисплее страница выглядит так(рис.1). Когда 2 блока не умещаются на ширину экрана, синий блок уходит вниз(рис.2), хотя у синего блока не задана строгая ширина и он может сжиматься(рис.3). Как добиться, чтобы синий блок сжимался сразу, не перепригивая вниз(красный блок должен стоять строго слева от синего)? С медиа запросами немного знаком, но как они могут помочь не знаю. Может смотреть в сторону Flex вместо Float или на Float такое возможно реализовать?
Изображения
Тип файла: jpg рис.1.JPG (31.8 Кб, 149 просмотров)
Тип файла: jpg рис.2.JPG (33.8 Кб, 155 просмотров)
Тип файла: jpg рис.3.JPG (28.8 Кб, 146 просмотров)
Рафаиил вне форума Ответить с цитированием
Старый 20.10.2017, 18:31   #6
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

левый отступ синему задай (margin-left) шириной с красный блок
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 20.10.2017, 19:21   #7
Рафаиил
Пользователь
 
Регистрация: 02.05.2013
Сообщений: 11
По умолчанию

Цитата:
Сообщение от Naive Посмотреть сообщение
левый отступ синему задай (margin-left) шириной с красный блок
Спс. Помогло. Нужно задать левый отступ margin и отменить float синему блоку, либо верстать флексами.

Последний раз редактировалось Рафаиил; 20.10.2017 в 19:28.
Рафаиил вне форума Ответить с цитированием
Старый 20.10.2017, 23:55   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Цитата:
Сообщение от Рафаиил Посмотреть сообщение
либо верстать флексами.
либо инлайн-блоками, либо табл-блоками, либо гридами, либо позишнами...
Миллионы способов сделать что тебе надо, выбирай что подойдет для текущей задачи, под текущие требования.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Возможно ли сделать так, чтобы при уменьшении размера экрана .block2 не перепрыгивал вниз, а уменьшался в размерах? Рафаиил Общие вопросы Web 0 17.10.2017 19:17
при уменьшении размера шапка не уменьшается а сжимается nikytt HTML и CSS 6 17.01.2016 22:57
Уменьшение размера видео, при уменьшении окна браузера Kasper1 JavaScript, Ajax 1 09.03.2011 09:46
При уменьшении окна в ie6 и ie7 контент сползает вниз Magaram HTML и CSS 0 03.03.2011 13:46
Возможно ли сделать так,чтобы при наведении на ячейку с названием делали высвечивалась крупным планом Кама Microsoft Office Excel 6 15.07.2010 14:57