Правый край div1 прижать к правому краю div2 через CSS

@OopsOops · Регистрация: 20.04.2010

Студворк — интернет-сервис помощи студентам

Есть div1, внутри него div2.
Как div2 правым краем с помощью css прижать правому краю div2.

Добавлено через 34 минуты
бррр.)))
text-align: right
в сво-вах css div1.

@rr33rr · 02.01.2024, 05:41

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

Вот с чем я работаю.

Вот код страницы с вашими картинками и скриптом:
Примечание: в коде ниже блоки подстраиваются под размер картинки с кораблем, потому не нужно нигде специально указывать их размеры. Ни высоту ни ширину. Указывается только ширина картинки с девушкой.

PHP/HTML
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Page</title>
<script src="JS/cvi_curl_lib.js"></script>
<script>
var start = 10;  /* стартовая высота угла, % */ 
var max = 110;    /* максимальная высота выхода угла, % */
var size = start; /* высота угла при onmousemove, %, */
var upper = true; /* направление движения */
 
window.onload = function () {
    cvi_curl.add(document.getElementById("image"), {size: start }) }
 
function increase(obj) {
    if(!upper && size >  start || size >= max) {upper = false; size -= 0.5}
   else if( upper && size <= start || size <  max) {upper = true;  size += 0.5}
    cvi_curl.modify(obj, {size: size})  }
</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.frame {
  display: inline-block;
  font-size: 0;
  position: relative;
  background: url("img/ship.jpg") no-repeat;
}
.frame img {
  display: block;
}
#image {
  position: relative;
  z-index: 1;
}
.layer {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100px;
}
.link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<div class="frame" onmousemove="increase(document.getElementById('image'))">
    <img src="img/ship.jpg" id="image" alt="ship">
    <img src="img/girl.png" class="layer" alt="girl">
    <a href="https://ya.ru" class="link"></a>
</div>
</body>
</html>

См в песочнице

Примечание 2: форум почему-то не дружит с ссылками в коде, содержащими в пути слово images, и автоматически переделывает ссылки вроде images/ship.jpg в https://www.cyberforum.ru/images/ship.jpg. Поэтому пришлось заменить images на img

@seregadushka · 02.01.2024, 13:44

rr33rr, да спасибо, так лучше. А я городил там с ID , без ID .
У меня был такой красивый минимальный код, и он меня подвел.
Я так и знал, нужно ссылки отдельный стиль писать. Именно ссылка все портила и не влазила в пакет !.
Я нашел и закинул исходные картинки по тому же адресу. Спасибо еще раз. И то , что без размеров, ваще супер

@gogolik · 02.01.2024, 13:48

Комментарий модератора

seregadushka, 1 вопрос - 1 тема.

@seregadushka · 02.01.2024, 15:39

Добавлено через 1 час 12 минут
rr33rr, я сделал

CSS
1
.layer {width: 10vw; }

работает ! Девка шевелится в зависимости от ширины браузера.
(у меня там 3 варианта, -- px, %, vw, vh), можно поиграться.

У вас картинка через background: url("images/PAPCRUISE2-400-260.jpg") no-repeat;
Она не сильно масштабируется. Это не очень модерново.
Можно здесь уйти от background: url( ) ? А вдруг скрипт может работать и на резиновой верстке ?

Добавлено через 26 минут
вообще удивлен сильно. Строка font-size: 0px; влияет на то, как позиционируются картинки . Вылазят ноги снизу. Какая связь ?

@rr33rr · 02.01.2024, 15:54

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

У вас картинка через background: url("https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg") no-repeat;
Она не сильно масштабируется.

Чтобы фон масштабировался, попробуйте добавить для .frame свойство background-size: 100%;:

CSS
1
2
3
4
5
6
7
.frame {
  display: inline-block;
  font-size: 0;
  position: relative;
  background: url("img/ship.jpg") no-repeat;
  background-size: 100%;
}

Добавлено через 10 минут

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

Строка font-size: 0px; влияет на то, как позиционируются картинки . Вылазят ноги снизу. Какая связь ?

font-size: 0px; убирает отступы для inline-block-а.
inline-block здесь используется, чтобы размеры блока frame были равны размеру его содержимого (размеру картинки с кораблем).
Альтернативный способ: заменить display: inline-block; на display: inline-flex;, тогда font-size: 0; не потребуется:

CSS
1
2
3
4
5
6
.frame {
  display: inline-flex;
  position: relative;
  background: url("img/ship.jpg") no-repeat;
  background-size: 100%;
}

@seregadushka · 02.01.2024, 17:07

rr33rr, На этом коде я познакомился к жизненной правдой -- "Ты видишь тушканчика? Нет. Но он существует" (ДМБ. 2000)
Столько раз эта девка пропадала с экрана и теперь я знаю, что на существует, и легко живет в отрицательных положениях страницы. Не знаю, зачем это надо разработчикам всего Интернет. Если координаты отрицательны, может стоит игнорировать знак "минус" ? Какая польза от женщины за границей ?

background-size: 100%; -- тоже не реагирует.

HTML5
1
2
<div class="frame" onmousemove="increase(document.getElementById('image'))">
    <img src="img/ship.jpg" id="image" alt="ship">

div class="frame" уже имеет в своем стиле background: url("https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg") no-repeat;
может, вторая строка просто перекрывает этот DIV ? И масштаб картинки работает, он просто не виден ?

Добавлено через 12 минут
Это я неправильно написал, все же видно. Торможу. Просто background-size: 100%; -- тоже не реагирует.

Опять поправка. Все реагирует, что при условии , что 100% относятся к DIV , а не к браузеру. Работает background-size: 50vw;
rr33rr, остался последний штрих , ,..

Добавлено через 11 минут
rr33rr,
если сделать

CSS
1
2
3
4
.frame {
  background-size: 50vw; }
#image {
  width: 50vw; }

то background масштабируется, а верхний кораблю уже нет, т.к. его держит скрипт. И другой возможности нет сравнять их размеры ?
Размер DIV равен внутренним объектам. И так как верхний корабль со скриптом не меняет размеры, то размер DIV отдельно и постоянен, а background меняется, и это бессмысленно.

@rr33rr · 02.01.2024, 18:10

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

background масштабируется, а верхний кораблю уже нет, т.к. его держит скрипт. И другой возможности нет сравнять их размеры ?

Если размер картинки не дает менять скрипт, то нужно менять скрипт. Это уже вопрос не про HTML+CSS, а в JS или к авторам скрипта

@seregadushka · 04.01.2024, 00:04

Вот страница на CODEPEN по коду rr33rr, Но я туда приклеил мобильное событие .И прекрасно работает на тачах.
Может, у кого какие мысли, тренируйтесь с кодом, сообщите если изменили для улучшения.

Новые блоги и статьи Все статьи Все блоги /
Транслитерация текста с кириллицы на латиницу (вариант №3) Maks 15.11.2026 Обновленная версия предыдущей обработки. Изменения коснулись букв: Ъ, Ы, Ь, Э, отображения которых зависят от положения реквизита "Транслитерация имён". Изменено отображение буквы Й. Добавлена. . .	Транслитерация текста с кириллицы на латиницу (вариант №2) Maks 13.11.2026 Обновленная версия ранее созданной обработки. Добавлено: - Проверка исходного текста на кириллицу, через обращение к стандартной функции "ТолькоКириллицаВСтроке" из общего модуля. . .	Часы с термометром и праздничным календарем yariko 12.11.2026 Сегодня мы рассмотрим как можно сделать отличные многофункциональные часы. Итак, поставим конкретную задачу: разработать часы с календарем, двумя термодатчиками, выводом поздравительных сообщений. . .	Транслитерация текста с кириллицы на латиницу (вариант №1) Maks 11.11.2026 Решил облегчить жизнь себе и коллегам админам при создании электронных почтовых ящиков для пользователей, в результате написал обработку "Транслитерация текста" с кириллицы на латиницу, а в ней. . .
Книги по геймдизайну, левел-дизайну, игровым механикам и проектированию игрового опыта 8Observer8 08.11.2026 Содержание блога \| English Version 1. 2003 - 06 - Designing Virtual Worlds (1st Edition) Автор: Richard A. Bartle \| Объем: 768 стр. Ссылки: Amazon . . .	Как только я захожу к себе в свою комнату я сразу же с себя снимаю свои трусы. Ответ от Джемени ИИ. zorxor 08.11.2026 Джемени, как только я захожу к себе в свою комнату я сразу же с себя снимаю свои трусы. Многие люди, возвращаясь домой, сразу переодеваются в максимально свободную одежду или вовсе предпочитают. . .	Паттерн очереди действий/команд (Action / Command Queue). Система очереди действий и кат-сцен с SDL3 Callbacks, cglm и OpenGL 8Observer8 07.11.2026 Содержание блога \| English Version Руководство для начинающих по реализации паттерна очереди действий/ команд (Action / Command Queue) на C++ (C++20) с использованием официального SDL3 Callbacks. . .	Проверка полного ФИО в типовом справочнике Maks 07.11.2026 Решение реализовано в конфигурации КА2, на примере справочника "КонтактныеЛицаПартнеров". Задача: Запрет инициалов. Не допускаеть использование сокращений вида "И. И. ", "И. И. ", "И И" и. . .

@OopsOops 18 / 15 / 1 Регистрация: 20.04.2010 Сообщений: 318

	Правый край div1 прижать к правому краю div2 через CSS 25.04.2010, 04:00. Показов 68590. Ответов 47 Метки нет (Все метки) Есть div1, внутри него div2. Как div2 правым краем с помощью css прижать правому краю div2. Добавлено через 34 минуты бррр.))) text-align: right в сво-вах css div1. 0

@seregadushka 35 / 3 / 0 Регистрация: 22.08.2011 Сообщений: 172
	02.01.2024, 13:44
	rr33rr, да спасибо, так лучше. А я городил там с ID , без ID . У меня был такой красивый минимальный код, и он меня подвел. Я так и знал, нужно ссылки отдельный стиль писать. Именно ссылка все портила и не влазила в пакет !. Я нашел и закинул исходные картинки по тому же адресу. Спасибо еще раз. И то , что без размеров, ваще супер 0

@seregadushka 35 / 3 / 0 Регистрация: 22.08.2011 Сообщений: 172
	04.01.2024, 00:04
	Вот страница на CODEPEN по коду rr33rr, Но я туда приклеил мобильное событие .И прекрасно работает на тачах. Может, у кого какие мысли, тренируйтесь с кодом, сообщите если изменили для улучшения. 0

Правый край div1 прижать к правому краю div2 через CSS

Решение