Как сделать чтобы при уменьшении окна сайт оставался прежним html

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

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

   .block1 < background: red; width: 300px; height: 500px; float: left; >.block2 < background: blue; max-width: 700px; height: 500px; float: left; >.items

Пожалуйста, оформляйте Ваш код согласно правилам .
Последний раз редактировалось Вадим Мошев; 19.10.2017 в 18:22 .
Пользователь
Регистрация: 27.08.2017
Сообщений: 99

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

Пользователь
Регистрация: 02.05.2013
Сообщений: 11
Сообщение от gryllus

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

Пользователь
Регистрация: 27.08.2017
Сообщений: 99

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

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

Пользователь
Регистрация: 02.05.2013
Сообщений: 11
Сообщение от gryllus

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

Дорого дня!
Постараюсь еще раз объяснить чего хочу добиться.На большом дисплее страница выглядит так(рис.1). Когда 2 блока не умещаются на ширину экрана, синий блок уходит вниз(рис.2), хотя у синего блока не задана строгая ширина и он может сжиматься(рис.3). Как добиться, чтобы синий блок сжимался сразу, не перепригивая вниз(красный блок должен стоять строго слева от синего)? С медиа запросами немного знаком, но как они могут помочь не знаю. Может смотреть в сторону Flex вместо Float или на Float такое возможно реализовать?

Изображения

	рис.1.JPG (31.8 Кб, 149 просмотров)
	рис.2.JPG (33.8 Кб, 155 просмотров)
	рис.3.JPG (28.8 Кб, 146 просмотров)

Как зафиксировать слой, чтобы он оставался на одном месте при прокрутке страницы?

Задать положение блочного элемента, чтобы он всегда оставался на одном месте при прокрутке страницы.

Решение

«Замораживание» элемента в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed . При этом положение элемента не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты задаются через свойства left , right , top и bottom , которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера (пример 1).

Пример 1. Использование position

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Фиксированное меню .menu < position: fixed; /* Фиксированное положение */ right: 10px; /* Расстояние от правого края окна браузера */ top: 20%; /* Расстояние сверху */ padding: 10px; /* Поля вокруг текста */ background: #ffe; /* Цвет фона */ border: 1px solid #333; /* Параметры рамки */ >.text

Результат данного примера показан на рис. 1. Обратите внимание, что положение элемента не меняется при прокрутке страницы вниз.

Рис. 1. Положение блока с меню

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Как , чтобы при изменение окна браузера ничего не менялось?

Вот пример, https://yandex.ru/?utm_source=. ord=zyltrc Если менять размер окна браузера, то все что за пределами окна не видно и оно не начинает подстраиваться под размеры окна. Как это сделать?

Лучшие ответы ( 1 )
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как сделать чтобы при изменении размера окна разрешение не менялось (DirectX 11)?
Здравствуйте. Я изучаю DirectX 11 и хотел бы узнать как мне в моей программе сделать так, чтобы при.

Как передать значение в функцию так, чтобы при изменение значения в функции оно менялось во всей программе?
#include <stdio.h> #include <stdlib.h> void sum(int a)

Реализовать, чтобы у программы при каждом её открытии менялось название и название окна
Ребят хочу реализовать чтобы у программы при каждом её открытии менялось название и название окна

Как сделать так чтобы при уменьшении окна браузера сайт был читабельным
Как сделать так чтобы при уменьшении окна браузера сайт был читабельным

Адаптивность при уменьшении окна браузера

Я сверстал карточку товара, и в задании от меня требуют:

· Сама карточка (прямоугольник с белым фоном) должна находиться строго по центру страницы по горизонтали и по вертикали независимо от размера экрана

· Не нужно растягивать весь блок (прямоугольник с белым фоном) на всю ширину страницы

· При уменьшении размера экрана до 991 пикселя блок (прямоугольник с белым фоном) также меняет свой размер. При этом контент не должен выпадать за пределы блока

А я нихрена не знаю про адаптивность, т.к. еще учусь.

Вот ссылка на хостинг.

И так же прикладываю архив с исходниками.

Вложения

lesson-4-homework.rar (163.6 Кб, 30 просмотров)

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Отступы при уменьшении окна браузера
Сделал небольшие отступы главного блока css. Можно ли чтобы при уменьшении окна эти отступы.

При уменьшении окна браузера меню распадается
добрый день при уменьшение окна браузера меню распадает <body> <div <div.

При уменьшении окна браузера блоки меняют положение
Как закрепить блоки чтобы они не меняли исходное положение?

215 / 180 / 79
Регистрация: 02.10.2011
Сообщений: 651
Отобразить по центру можно так :

1 2 3 4

position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);

Чтобы применить стили для 991 пикселей и ниже используется медиазпросы

@media only screen and (max-width : 991px) { }

204 / 67 / 41
Регистрация: 15.09.2018
Сообщений: 197

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

* { margin: 0; padding: 0; box-sizing: border-box; } body { /*! background-color: #f6f6f6; */ color: #2f2f2f; } .container { /*! position: absolute; */ /*! left: 50%; */ /*! margin-left: -505px; */ /*! top: 50%; */ /*! margin-top: -251.5px; */ /*! width: 1010px; */ /*! height: 503px; */ /*! border: 1px solid #d7d7d7; */ background-color: #fff; width: 100%; max-width: 900px; margin: 15px auto; padding: 45px 15px; } .box-1 { display: inline-block; vertical-align: middle; width: 43%; /*! margin: 64px 100px 64px 48px; */ margin-right: 11%; } #beats { width: 100%; } .box-2 { display: inline-block; vertical-align: middle; /*! width: 393px; */ width: 45%; } h1 { font-family: "Arial-BoldMT"; font-size: 23px; font-weight: bold; } p { /*! display: inline-block; */ margin-top: 30px; font-family: "Arial MT"; font-size: 15px; } .price { display: block; margin-top: 55px; font-size: 15px; } .number { display: block; margin-top: 23px; font-family: "Arial MT"; font-size: 30px; } button { margin-top: 56px; width: 252px; height: 50px; font-size: 19px; background-color: #ec744a; color: #fff; border-style: none; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f6f6f6; color: #2f2f2f; } .container { /*! position: absolute; */ /*! left: 50%; */ /*! margin-left: -505px; */ /*! top: 50%; */ /*! margin-top: -251.5px; */ /*! width: 1010px; */ /*! height: 503px; */ border: 1px solid #d7d7d7; background-color: #fff; width: 100%; max-width: 900px; margin: 15px auto; padding: 45px 15px; } .box-1 { display: inline-block; vertical-align: middle; width: 43%; /*! margin: 64px 100px 64px 48px; */ margin-right: 11%; } #beats { width: 100%; } .box-2 { display: inline-block; vertical-align: middle; /*! width: 393px; */ width: 45%; } h1 { font-family: "Arial-BoldMT"; font-size: 23px; font-weight: bold; } p { /*! display: inline-block; */ margin-top: 30px; font-family: "Arial MT"; font-size: 15px; } .price { display: block; margin-top: 55px; font-size: 15px; } .number { display: block; margin-top: 23px; font-family: "Arial MT"; font-size: 30px; } button { margin-top: 56px; width: 252px; height: 50px; font-size: 19px; background-color: #ec744a; color: #fff; border-style: none; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

* { margin: 0; padding: 0; box-sizing: border-box; } body { /*! background-color: #f6f6f6; */ color: #2f2f2f; } .container { /*! position: absolute; */ /*! left: 50%; */ /*! margin-left: -505px; */ /*! top: 50%; */ /*! margin-top: -251.5px; */ /*! width: 1010px; */ /*! height: 503px; */ /*! border: 1px solid #d7d7d7; */ /*! background-color: #fff; */ display: flex; width: 100%; max-width: 900px; margin: 15px auto; padding: 45px 15px; } .box-1 { /*! display: inline-block; */ /*! vertical-align: middle; */ width: 43%; /*! margin: 64px 100px 64px 48px; */ margin-right: 11%; } #beats { width: 100%; } .box-2 { /*! display: inline-block; */ /*! vertical-align: middle; */ /*! width: 393px; */ width: 45%; } h1 { font-family: "Arial-BoldMT"; font-size: 23px; font-weight: bold; } p { /*! display: inline-block; */ margin-top: 30px; font-family: "Arial MT"; font-size: 15px; } .price { display: block; margin-top: 55px; font-size: 15px; } .number { display: block; margin-top: 23px; font-family: "Arial MT"; font-size: 30px; } button { margin-top: 56px; width: 252px; height: 50px; font-size: 19px; background-color: #ec744a; color: #fff; border-style: none; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105

* { margin: 0; padding: 0; box-sizing: border-box; } body { /*! background-color: #f6f6f6; */ color: #2f2f2f; } .container { /*! position: absolute; */ /*! left: 50%; */ /*! margin-left: -505px; */ /*! top: 50%; */ /*! margin-top: -251.5px; */ /*! width: 1010px; */ /*! height: 503px; */ /*! border: 1px solid #d7d7d7; */ /*! background-color: #fff; */ display: flex; width: 100%; max-width: 900px; margin: 15px auto; padding: 45px 15px; } .box-1 { /*! display: inline-block; */ /*! vertical-align: middle; */ width: 43%; /*! margin: 64px 100px 64px 48px; */ margin-right: 11%; } #beats { width: 100%; } .box-2 { /*! display: inline-block; */ /*! vertical-align: middle; */ /*! width: 393px; */ width: 45%; } h1 { font-family: "Arial-BoldMT"; font-size: 23px; font-weight: bold; } p { /*! display: inline-block; */ margin-top: 30px; font-family: "Arial MT"; font-size: 15px; } .price { display: block; margin-top: 55px; font-size: 15px; } .number { display: block; margin-top: 23px; font-family: "Arial MT"; font-size: 30px; } button { margin-top: 56px; width: 252px; height: 50px; font-size: 19px; background-color: #ec744a; color: #fff; border-style: none; } @media (max-width: 600px){ .container{ flex-wrap: wrap; } .box-1{ width: 100%; margin-right: 0; margin-bottom: 45px; } .box-2{ width: 100%; text-align: center; } }

Читать:

Сколько стоит bmw последней модели