Как перенести блок вправо? Html/css
Всех приветствую. Есть контейнер с максимальной шириной. И в нем два блока. Все это flex. Как это все передвинуть к концу экрана вправо? Justiny пробовал, не работает. Извиняюсь за тупые вопросы, я учусь
Отслеживать
задан 30 апр 2021 в 20:11
1 1 1 бронзовый знак
Что Вы имеете ввиду под «то все передвинуть к концу экрана вправо», что именно Вы хотите передвинуть вправо? Предоставьте лучше ваш html код.
30 апр 2021 в 20:47
Если вы имеете ввиду левый блок «The Cabins» и второй блок от него изображение, тогда их обёртке задайте justify-content: space-between; и текст встанет с левой стороны как и стоял, а изображение сдвинется в самый край. Если же как вы сказали они оба должны переместиться в право, тогда justify-content: flex-end; . Их обёртка при этом должна быть width: 100%; — так как я сейчас вижу, что она растянута не на всю ширину экрана.
Как сдвинуть блок вправо?
Подскажите, как сдвинуть блок на пару пикселей вправо
Подскажите как сдвинуть блок на пару пикселей вправо. Пример на картинке.
Как сдвинуть вправо и вниз цифры номера телефона через html код
В шапке сайта необходимо переместить номер тел, какой html код для этого прописать?
Не могу сдвинуть элемент вправо
Как сделать, чтобы номер телефона был справа только при максимальном разрешении экрана .col-lg.
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 611
Сообщение было отмечено tmpnik1 как решение
Решение
ошибка в синтаксисе
Сообщение от tmpnik1 
margin-left:100px;
Регистрация: 28.02.2011
Сообщений: 1,780
Что-то всё равно не получается. сдвинуть блок вправо.
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
html> script> function test() < var _square = document.getElementById('square'); _square.style.marginLeft = ((parseInt(_square.style.marginLeft) + 1) + 'px'); >/script> style type="text/css"> #layer1 < width: 950; border: 4px solid blue; height: 30px; /* background: #fc0; >#layer1 P < padding: 10px; >#square < width: 30px; height: 30px; background: #cc0000; marginLeft: 2px; >/style> head> meta http-equiv="content-type" content="text/html; charset=utf-8" /> title> /title> /head> body> div id="layer1"> div id="square">/div> /div> p>/p> input type="button" value="Пуск" onClick="timer = window.setInterval('test()',1);"> input type="button" value="Стоп" onclick="clearInterval(timer);"/> p>/p> /body> /html>
2964 / 2597 / 1068
Регистрация: 15.12.2012
Сообщений: 9,855
Записей в блоге: 11
tmpnik1, стили пишите внимательней.
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
html> script> function test() < var _square = document.getElementById('square'); _square.style.marginLeft = ((parseInt(_square.style.marginLeft) + 1) + 'px'); >/script> style type="text/css"> #layer1 < width: 950px; border: 4px solid blue; height: 30px; /* background: #fc0; >#layer1 P < padding: 10px; >#square < width: 30px; height: 30px; background: #cc0000; margin-left: 2px; >/style> head> meta http-equiv="content-type" content="text/html; charset=utf-8" /> title> /title> /head> body> div id="layer1"> div id="square">/div> /div> p>/p> input type="button" value="Пуск" onClick="timer = window.setInterval('test()',1);"> input type="button" value="Стоп" onclick="clearInterval(timer);"/> p>/p> /body> /html>
Регистрация: 28.02.2011
Сообщений: 1,780
да нет тут дело не в стиле( margin-left: 2px). -), это когда не получается, то пытаешься как-то изменить ситуацию, видать это был не тот вариант. с этим стилем я разобрался.. не понятно, почему после строчки _square.style.marginLeft = ((parseInt(_square.style.marginLeft) + 1) + ‘px’); квадратик не смещается вправо, хотя по формуле, он должен смещаться. т.к. увеличивается отступ.
1740 / 1085 / 386
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
выкладываю рабочую версию кода Fedor92 и ссылку на его работу (только там не видно никакой работы если честно, но в документе значения меняются)
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
html> style type="text/css"> #layer1 < width: 950px; border: 4px solid blue; height: 30px; /* background: #fc0; >#layer1 P < padding: 10px; >#square < width: 30px; height: 30px; background: #cc0000; margin-left: 2px; >/style> head> meta http-equiv="content-type" content="text/html; charset=utf-8" /> title> /title> /head> body> div id="layer1"> div id="square">/div> /div> p>/p> input type="button" value="Пуск" id="start"> input type="button" value="Стоп" id="stop"> p>/p> script> function grow() < var _square = document.getElementById('square'); _square.style.marginLeft = ((parseInt(_square.style.marginLeft) + 1 || 0) + 'px'); console.log(_square.style.marginLeft) >var timer; start.onclick=function() < console.log(2) timer=setInterval(grow,80); >stop.onclick=function() < clearInterval(timer); >/script> /body> /html>
Функции CSS-трансформации
Трансформации к элементу применяются при помощи свойства transform . А значением для этого свойства являются функции трансформации.
Пример
Скопировать ссылку «Пример» Скопировано
.element transform: translateX(120px);>.element transform: translateX(120px); >
Как понять
Скопировать ссылку «Как понять» Скопировано
Часто бывает необходимо каким-то образом трансформировать визуальное представление элемента (масштабировать, повернуть, переместить) и при этом никак не затронуть соседние элементы в документе. Для подобных преобразований используется свойство transform . В качестве значения выступают различные функции трансформации: rotate , translate , scale , skew и другие.
Функции трансформации можно условно разбить на несколько групп.
Функции перемещения
Скопировать ссылку «Функции перемещения» Скопировано
translate ( X , Y )
Скопировать ссылку «translate(X, Y)» Скопировано
Функция используется для смещения элемента вверх-вниз или влево-вправо. В целом, ту же работу выполняют CSS-свойства top , right , bottom , left — например, для абсолютно ( position : absolute ) или относительно ( position : relative ) спозиционированных элементов. Но есть ряд важных отличий: элемент позиционируется относительно соответствующих сторон родителя. То есть left : 20px сместит элемент на 20 пикселей относительно левой границы родителя, а translate ( 20px ) сместит элемент вправо относительно того места, где тот находился до трансформации. В целом, позиционирование и translate прекрасно сочетаются друг с другом. Позиционирование лучше использовать для изначального расположения элемента на странице, а translate применять, если нужно добавить анимации движения.
Функция принимает два параметра: первый параметр отвечает за смещение вправо-влево, а второй параметр — вверх-вниз. Если передать только один параметр, тогда смещение будет только вправо-влево. Мы можем использовать любые единицы измерения расстояния из CSS, например, абсолютные 10px или относительные 50 % . Абсолютное значение используется «как есть»: элемент сместится на 10 пикселей. Относительное значение считается относительно размеров самого элемента. При указании 50 % элемент сместится на половину собственной ширины или высоты.
translate X ( X ) , translate Y ( Y ) , translate Z ( Z )
Скопировать ссылку «translateX(X), translateY(Y), translateZ(Z)» Скопировано
Когда нужно сместить элемент вдоль конкретной оси, можно применить соответствующие функции трансформации.
translate3d ( X , Y , Z )
Скопировать ссылку «translate3d(X, Y, Z)» Скопировано
Если нужно сместить элемент по всем трём осям, можно всё собрать в кучку и использовать эту функцию.
Функции масштабирования
Скопировать ссылку «Функции масштабирования» Скопировано
scale ( X , Y )
Скопировать ссылку «scale(X, Y)» Скопировано
Функция для масштабирования элемента. Значения X и Y — это положительные числа, либо 0. Если в функцию передать 0, то элемент не будет виден. Единица соответствует нормальному масштабу. Числа от 0 до 1 — это уменьшенный масштаб. Числа больше единицы — увеличенный масштаб. Например, чтобы визуально увеличить элемент в 2 раза, нужно написать transform : scale ( 2 ) .
В отличие от translate , один параметр в функции scale работает несколько иначе. scale ( 2 ) — это то же самое, что scale ( 2 , 2 ) , то есть одно число указывает на пропорциональное масштабирование по обеим осям одновременно.
scale X ( X ) , scale Y ( Y ) , scale Z ( Z )
Скопировать ссылку «scaleX(X), scaleY(Y), scaleZ(Z)» Скопировано
Используем, когда необходимо растягивать или сжимать элемент только по горизонтали, вертикали или третьей оси Z .
scale3d ( X , Y , Z )
Скопировать ссылку «scale3d(X, Y, Z)» Скопировано
Если нужно масштабировать элемент по всем трём осям, можно всё собрать в кучку и использовать эту функцию.
Функции наклона
Скопировать ссылку «Функции наклона» Скопировано
skew X ( X ) , skew Y ( Y )
Скопировать ссылку «skewX(X), skewY(Y)» Скопировано
Функции выполняют сдвиг одной стороны элемента относительно противолежащей. В результате элемент как бы наклоняется. Величина наклона зависит от положения точки применения трансформаций ( transform — origin ) и числа градусов, заданных в параметрах. skew X сдвигает верхнюю сторону элемента относительно нижней. skew Y — правую сторону относительно левой.
Функции поворота
Скопировать ссылку «Функции поворота» Скопировано
rotate X ( X ) , rotate Y ( Y ) , rotate Z ( Z )
Скопировать ссылку «rotateX(X), rotateY(Y), rotateZ(Z)» Скопировано
Кроме сдвига или наклона, элемент можно вращать. В функцию передаём единицы измерения углов ( deg , rad , turn ), например 45deg или 0 . 5turn . Обратите внимание, что обычное вращение элемента на странице — это вращение относительно оси Z . Если мы хотим вращать элемент относительно других осей, то нужно не забывать про перспективу. С ней повороты относительно X или Y будут выглядеть максимально естественно.
rotate ( Z )
Скопировать ссылку «rotate(Z)» Скопировано
Функция аналогична rotate Z ( Z ) . Чтобы не запоминать ось для типового вращения элемента, мы можем использовать просто слово rotate .
rotate3d ( X , Y , Z )
Скопировать ссылку «rotate3d(X, Y, Z)» Скопировано
Если нужно повернуть элемент по всем трём осям, можно всё собрать в кучку и использовать эту функцию.
Прочие функции
Скопировать ссылку «Прочие функции» Скопировано
matrix ( a , b , c , d , tx , ty )
Скопировать ссылку «matrix(a, b, c, d, tx, ty)» Скопировано
Выше мы упомянули несколько функций трансформации. Каждая выполняет какое-то одно небольшое действие. matrix ( ) — это функция, которой можно описать любую трансформацию в плоскости экрана. Она использует матричные преобразования и может заменить собой все вышеописанные функции. Но при этом она очень сложно читается. Например, глядя на функцию matrix ( 0 . 707107 , 0 . 707107 , — 0 . 707107 , 0 . 707107 , — 0 . 707107 , 34 . 6482 ) невозможно сразу точно определить, что она аналогична записи rotate ( 45deg ) translate ( 24px , 25px ) . Зачем же она нужна, такая сложная, если проще описать трансформации соответствующими функциями? Ну например, с её помощью можно писать сложные динамические анимации. Популярные JS-библиотеки для анимации «под капотом» используют как раз матричные преобразования, а не конкретные функции трансформации.
matrix3d ( a1 , b1 , c1 , d1 , a2 , b2 , c2 , d2 , a3 , b3 , c3 , d3 , a4 , b4 , c4 , d4 )
Скопировать ссылку «matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)» Скопировано
Если нам нужно произвести трансформации в трёхмерном пространстве, а не в плоскости экрана, то нужно использовать эту функцию. Она ещё более сложна в понимании, и вряд ли кто-то вообще пишет её руками.
perspective ( Z )
Скопировать ссылку «perspective(Z)» Скопировано
Несмотря на то, что экран плоский, у нас всё равно есть возможность перемещать элемент вдоль оси Z . Она направлена перпендикулярно плоскости экрана в сторону пользователя. Если мы используем translate Z просто так, то никакого перемещения ближе или дальше мы не увидим. Чтобы было ощущение движения к нам или от нас, элемент должен становиться крупнее или мельче. Стул, который стоит рядом с нами, будет визуально крупнее, чем стул, стоящий в конце комнаты. Эта разница в размерах — следствие перспективы. Элемент на экране может вести себя подобно объектам в реальном мире и менять размер при перемещении к нам или от нас. Чтобы это заработало, нужно элементу задать свойство perspective . Это свойство необходимо применять при любых трансформациях, выходящих из плоскости экрана.
Функция perspective ( ) принимает один параметр — расстояние до точки схождения перспективы. Плоскость экрана принимается за начало координат. Например, запись perspective ( 500px ) означает, что точка схождения перспективы находится как бы на расстоянии 500 пикселей вглубь от плоскости экрана.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Можно применять сразу несколько функций трансформации:
.element transform: translate(20px, 20px) skew(20deg);>.element transform: translate(20px, 20px) skew(20deg); >
�� Если среди значений есть функция perspective ( ) , то она должна быть первой среди всех значений:
.element transform: translate3d(10px, 0, 20px) rotateY(3deg) perspective(500px);>.element transform: translate3d(10px, 0, 20px) rotateY(3deg) perspective(500px); >
.element transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(3deg);>.element transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(3deg); >
�� В последних версиях спецификации появились отдельные CSS-свойства для трансформаций. Это rotate , translate и scale . Если раньше мы писали комплексные трансформации, применяя несколько функций, то теперь каждую трансформацию можем описать отдельным свойством:
.transform-function transform: translate(100px, 100px) rotate(180deg) scale(2);> .individual-transforms translate: 100px 100px; rotate: 180deg; scale: 2;>.transform-function transform: translate(100px, 100px) rotate(180deg) scale(2); > .individual-transforms translate: 100px 100px; rotate: 180deg; scale: 2; >
Оба этих способа записи выполнят одни и те же трансформации, но у них есть ряд принципиальных отличий. Самое главное — используя индивидуальные свойства, мы можем создавать классы-модификаторы без опасения перекрыть всё свойство transform :
.element transform: translateX(20px) rotate(90deg);> .mid-scale scale: 1.5;>.element transform: translateX(20px) rotate(90deg); > .mid-scale scale: 1.5; >
В этом случае мы просто добавим масштабирование к элементу, какие бы свойства ни были ему заданы до этого. Подобный трюк не удастся провернуть со свойством transform :
.element transform: translateX(20px) rotate(90deg);> .mid-scale transform: scale(1.5);>.element transform: translateX(20px) rotate(90deg); > .mid-scale transform: scale(1.5); >
Добавив этот класс к элементу, мы просто рискуем перекрыть любое свойство transform , заданное до этого.
�� При использовании свойства transform результирующая трансформация вычисляется с учётом порядка функций. Например, transform : rotate ( 15deg ) translate X ( 100px ) translate Y ( 30px ) и transform : translate X ( 100px ) translate Y ( 30px ) rotate ( 15deg ) ; дадут разный конечный результат:
Если же мы используем индивидуальные свойства, результат будет одинаковым вне зависимости от порядка свойств:
Второй пример корректно работает во всех современных браузерах, для более старых версий проверяйте поддержку на Can I use.
На практике
Скопировать ссылку «На практике» Скопировано
Саша Патлух советует
Скопировать ссылку «Саша Патлух советует» Скопировано
�� Полезное знание при работе с функциями трансформации из JavaScript.
Если мы вычисляем значение функции трансформации, заданной в CSS, методом get Computed Style ( ) , получим матрицу преобразований. А в случае получения значения из свойства style по ключу — получим строку с описанием функции трансформации.
Допустим, на странице есть с такой трансформацией, описанной в CSS:
div transform: translate(200px);>div transform: translate(200px); >
Вычисление из JS методом get Computed Style ( ) вернёт значение matrix ( 1 , 0 , 0 , 1 , 200 , 0 ) :
const element = document.querySelector('div')console.log(getComputedStyle(element).transform)const element = document.querySelector('div') console.log(getComputedStyle(element).transform)
Но если стиль задан инлайном в HTML,
div style="transform: translate(200px);">div>
вы можете получить строку с более удобным для чтения и дальнейшей работы значением.
Код ниже вернёт строку translate ( 200px )
const element = document.querySelector('div')console.log(element.style.transform)const element = document.querySelector('div') console.log(element.style.transform)
Float-блоки по углам контейнера c текстом вокруг
Перемещение изображения вправо или влево с обтеканием текста? Float-блок – это простая задача, но как насчет перемещения изображения в нижний левый или нижний правый угол.
На первый взгляд теперь это кажется сложной задачей, наверное, чтобы справиться с ней, может понадобиться JS?
На самом деле – нет, всё это легко делается с помощью всего нескольких строк CSS!
Для внесения ясности разберем код.
Lorem ipsum dolor .
.wrapper < display:flex; >.float
[wrapper]
Основной div должен быть flexbox-контейнером. Flexbox позволяет полагаться, по умолчанию, на выравнивание по растяжению чтобы иметь возможность использовать height:100% .
[box]
Это flex-элемент и здесь ему не нужен какой-либо конкретный CSS. Этот элемент будет определять высоту своего контейнера (wrapper) и, поскольку это flex-элемент, он будет растянут до своей собственной высоты. При растяжении такое поведение даст эталонную высоту, которую могут использовать дочерние элементы.
If the flex item has align-self: stretch, redo layout for its contents, treating this used size as its definite cross size so that percentage-sized children can be resolved.
[float]
“Плавающий” float-элемент рядом с текстовым содержимым, благодаря сложному вычислению высоты, будет занимать всю высоту. Внутри этого элемента изображение перемещается вниз с помощью flexbox. До сих пор ничего сложного и код должен выдавать следующее:
Теперь немного магии с помощью css-свойства shape-outside . CSS-свойство shape-outside определяет произвольную фигуру, которую обтекает соседнее содержимое. По умолчанию это содержимое обтекает по внешней границе, с учётом margin . shape-outside предоставляет возможность настроить обтекание текстом объекты сложной формы.
inset() определяет область вставленного прямоугольника. Первые четыре аргумента представляют собой верхнее, правое, нижнее и левое смещения внутрь от ссылочного блока, которые определяют расположение краев вставленного прямоугольника.
Итак, с помощью shape-outside: inset(calc(100% — X) 0 0) создаётся вставка-прямоугольник, которая начинается точно в верхней части изображения, так как координата top будет равна 100% — X , где X – высота (height) изображения, а 100% – это высота float-элемента.
Такой трюк позволит тексту обернуть свободное пространство над изображением, т.е. плавающее изображение окажется прижатым к правому нижнему углу блока с текстом. С помощью значения float: left можно легко переместить изображение в левый нижний угол.
Используя вышесказанное, можно реализовать более необычные ситуации. Вот некоторые из них: