Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

Ответ
 
Опции темы
Старый 18.10.2017, 21:58   #1
Рафаиил
Пользователь
 
Регистрация: 02.05.2013
Сообщений: 11
Репутация: 10
По умолчанию Возможно ли сделать так, чтобы при уменьшении размера экрана .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 в 19:22.
Рафаиил вне форума   Ответить с цитированием
Старый 19.10.2017, 17:53   #2
gryllus
Форумчанин
 
Регистрация: 27.08.2017
Адрес: город Пермь
Сообщений: 99
Репутация: 60
По умолчанию

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

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

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

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

Цитата:
Сообщение от 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 Кб, 1 просмотров)
Тип файла: jpg рис.2.JPG (33.8 Кб, 1 просмотров)
Тип файла: jpg рис.3.JPG (28.8 Кб, 1 просмотров)
Рафаиил вне форума   Ответить с цитированием
Старый 20.10.2017, 19:31   #6
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,706
Репутация: 2205
По умолчанию

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

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

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

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


18:40.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru