Как переместить блок вниз css

Подвинуть блок вниз

Посредине есть 3 колонки (к блока), под ними один большой, при наполнении из одной колонок она расширяется по вертикали и налазит на нижний блок. Вопрос: как опустить нижний блок относительно одной из колонок?

.wrapper < width:990px; margin:0 auto; height:auto; background-color:silver; >.menu < // меню колонок width:99%; margin:0 auto; min-height:200px; max-height:400px; >.pravka < // нижний блок position:relative; width:99%; margin:2px auto; height:600px; background-color:yellow; >.block_menu1,.block_menu2,.block_menu3

Как переместить блок?

переместить блок
Есть два блока. На одном блоке — размещены описание и кнопка, при нажатии на которую, из-под этого.

Не могу переместить блок
Такая проблема, появилась у меня. Вот есть код, в принципе рабочий, но вот мне не нравится как.

Переместить блок, используя только CSS
Подскажите как переместить блок, как показано на рисунке используя только css

Нужно переместить блок с текстом новости на место, где зеленые кружки навигации!
Нужно, чтобы блок отображения текста с ссылкой на новость, был внизу. Блок с кружочками навигации.

21 / 21 / 16
Регистрация: 30.09.2013
Сообщений: 262

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

html> head> title>/title> /head> body> body background="Фон.jpg"> div style = "height:900px; width:1200px; margin:auto; background-color:White; border-right:4px solid #8B8B8B; border-bottom:4px solid #8B8B8B; font-size:22px; color:#483D8B; position: relative;" align="center"> div style = "height:400px; width:200px; background-color:#FA8072; border-right:4px solid #8B8B8B; border-bottom:4px solid #8B8B8B; position: absolute; bottom: 0; right: 0;"> /div> /div> /body> /html>

Добавлено через 2 минуты
position: relative; — указывает на то что этот элемент есть точкой отсчета для всех вложенных элементов

position: absolute; — указывает на то что этот элемент имеет абсолютное положение в пространстве не взерая на положение других элементов
bottom: 0; — прижимаем элемент к низу блока
right: 0; — прижимаем элемент справа блока

Перенос div на новую строку при адаптивном режиме?

https://codepen.io/aptypkaa/pen/eYNYmXz
есть блок в котором 4 блока в ряд. все 4 блока по 25% ширины. итого 100% во весь блок. мне надо чтобы они
равномерно и адекватно складывались в столбик при уменьшении экрана
display:flex и flex-wrap:wrap не помогает

• Вопрос задан более трёх лет назад
• 10613 просмотров

9 комментариев

Простой 9 комментариев

Так пропишите media queries для разных разрешений.
art style @arttstyle Автор вопроса
kulaeff, Только так? какого-то автоматически адаптивного варианта нету?

25% ширины. итого 100%

нет есть еще бордеры
адекватно это как? make-pizgato — в разработке
так все переносится что сказали

* < box-sizing: border-box; >#main < width: 100%; background-color:#000; display:flex; flex-wrap: wrap; color: pink; >.asd

art style, а откуда браузеру знать, на каком разрешении складывать квадраты в столбик? Особенно если квадраты имеют относительный размер.

art style @arttstyle Автор вопроса

всем спасибо. ответ на вопрос простой: чтобы все было ровно нужно обернуть по 2 блока в еще один блок и задать им ширину и другие параметры. далее через media уже манипулируем этими блоками-обертками и содержимыми в них.
я просто не люблю такие каскадные структуры. люблю когда все просто 1 секция — 4 адаптивных блока внутри. но к сожалению так не получается..
получилось
-div
—div
—div
—div
—div
—div
—div

Перемещение окна и прокрутка страницы в JavaScript

В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).

Перемещение окна

В JavaScript имеются следующие методы объекта window для перемещения окна:

• moveTo – абсолютное перемещение окна в указанные координаты экрана;
• moveBy – перемещения окна на указанное количество пикселей относительно его текущего положения.

Синтаксис метода « window.moveTo »:

JavaScript

window.moveTo(x, y); // x и у – это координаты точки (соответственно горизонтальная и вертикальная), в которую необходимо переместить левый верхний угол окна браузера

Пример, в котором переместим окно в точку (50, 75):

JavaScript

window.moveTo(50, 75);

Пример, в котором произведём перемещение окна в левый верхний угол экрана:

JavaScript

window.moveTo(0, 0);

Синтаксис метода « window.moveBy »:

JavaScript

window.moveBy(deltaX, deltaY); // deltaX и deltaY – количество пикселей, на которое следует переместить окно соответственно по горизонтали и вертикали относительно его текущего положения

Например, сдвинем окно на 75px вправо и на 100px вниз:

JavaScript

window.moveBy(75, 100);

В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:

• окно (или вкладка) должно быть создано с помощью window.open ;
• в окне не должно находиться более чем одной вкладки.

JavaScript

  . Открыть окно Переместить левый угол окна в точку (300,300) Переместить окно относительно его текущего положения на 50px вправо и на 50px вниз Переместить окно относительно его текущего положения на 50px влево Переместить окно относительно его текущего положения на 50px вправо Переместить окно относительно его текущего положения на 50px вверх Переместить окно относительно его текущего положения на 50px вниз

Изменение размеров окна

Методы объекта window для изменения размеров окна:

• resizeTo – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные значения;
• resizeBy – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные величины относительно его текущих размеров.

В JavaScript методы resizeTo и resizeBy выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).

JavaScript

// width и height – новая ширина и высота окна в пикселях window.resizeTo(width, height);

Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

JavaScript

// получаем 1/2 доступной ширины экрана в пикселях const width = window.screen.availWidth / 2; // получаем 1/2 доступной высоты экрана в пикселях const height = window.screen.availHeight / 2; // устанавливаем окну ширину и высоту window.resizeTo(width, height);

JavaScript

window.resizeBy(deltaX, deltaY); // deltaX и deltaY – количество пикселей на которые нужно увеличить размеры окна соответственно по горизонтали и вертикали

Например, уменьшим размеры окна (его ширину и высоту) на 50px:

JavaScript

window.resizeBy(-50, -50);

  . Открыть окно Изменить ширину и высоту окна браузера (300,300) Увеличить ширину и высоту окна браузера на 25px Уменьшить ширину окна на 25px Увеличить ширину окна на 25px Уменьшить высоту окна на 25px Увеличить высоту окна на 25px

Прокрутка документа

В JavaScript имеются следующие методы объекта window для прокрутки документа:

• scroll ( scrollTo ) — прокручивает страницу до указанного места в абсолютном выражении;
• scrollBy — прокручивает документ на определённое количество пикселей относительно текущей позиции.

Синтаксис метода scroll (метод scrollTo выполняет то же самое, что scroll и не отличается по синтаксису):

JavaScript

// 1 вариант window.scroll(left, top); // left - по оси Х, top - по оси Y // 2 вариант window.scroll({ left: 0, // до какого количества пикселей прокрутить вправо top: 0, // до какого количество пикселей прокрутить вниз behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно });

Синтаксис метода scrollBy :

JavaScript

// 1 вариант window.scrollBy(left, top); // left - по оси Х, top - по оси Y // 2 вариант window.scrollBy({ left: 0, // на какое количество пикселей прокрутить вправо от текущей позиции top: 0, // на какое количество пикселей прокрутить вниз от текущей позиции behavior: 'auto'; // определяет плавность прокрутки: 'auto' - мгновенно (по умолчанию), 'smooth' - плавно });

Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод scroll или scrollBy с определёнными значениями:

вниз мгновенно (до 2000) вниз плавно (на +200) вверх плавно (до 0)