Возможно ли сделать так, чтобы при уменьшении размера экрана .block2 не перепрыгивал вниз, а уменьшался в размерах? - HTML и CSS

Рафаиил · 18.10.2017, 20:58

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

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

gryllus · 19.10.2017, 16:53

Можно, почитайте про медиа-запросы(@media) CSS3 сейчас поддерживается практически всеми браузерами свежих версий http://htmlbook.ru/css/value/media.

Рафаиил · 19.10.2017, 18:36

Цитата:

Сообщение от gryllus

Можно, почитайте про медиа-запросы(@media) CSS3 сейчас поддерживается практически всеми браузерами свежих версий http://htmlbook.ru/css/value/media.

Не совсем понял как это реализовать медиа-запросами. Мне нужно чтобы .block1 был прижат к левому краю, а .block 2 был динамическим(резиновым, адаптивным) и при этом оставался на уровне .block1. Допустим .block1 это сайдбар а .block2 это контент, который не имеет строгой ширины(ограничен только максимальной шириной, но не ограничен минимальной) и может сжиматься практически до 0. Надеюсь понятно объяснил

gryllus · 20.10.2017, 11:12

Цитата:

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

Доброго дня!

Если у вас сейчас всё сделано так как вам угодно, но не хватает только адаптивности, то медиа-запросы(@media) вам в этом помогут. Если вы с ними не сталкивались, то я постараюсь вас просветить.
У вас все блоки обтекаются справа, а какой там контент (текстом или то же блочными элементами)?

Рафаиил · 20.10.2017, 17:29

Цитата:

Сообщение от 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 такое возможно реализовать?

Naive · 20.10.2017, 18:31

левый отступ синему задай (margin-left) шириной с красный блок

Рафаиил · 20.10.2017, 19:21

Цитата:

Сообщение от Naive

левый отступ синему задай (margin-left) шириной с красный блок

Спс. Помогло. Нужно задать левый отступ margin и отменить float синему блоку, либо верстать флексами.

Naive · 20.10.2017, 23:55

Цитата:

Сообщение от Рафаиил

либо верстать флексами.

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

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.

20.10.2017, 18:31	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	левый отступ синему задай (margin-left) шириной с красный блок Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

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

19.10.2017, 16:53	#2
gryllus Пользователь Регистрация: 27.08.2017 Сообщений: 99	Можно, почитайте про медиа-запросы(@media) CSS3 сейчас поддерживается практически всеми браузерами свежих версий http://htmlbook.ru/css/value/media.