Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
 
Рейтинг 4.54/367: Рейтинг темы: голосов - 367, средняя оценка - 4.54
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
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
25.04.2010, 04:00
Ответы с готовыми решениями:

Прижать картинку к правому краю
Здравствуйте! В блоке содержится изображение и таблица. Таблица шире чем картинка и, соответственно картинка не доходит до конца экрана....

Прижать блок к правому краю
Начал изучать css и не получается сделать как хочу, помогите пожалуйста прижать синий блок к верху страницы. <body> <div...

Прижать кнопку к нижнему правому краю
Кнопка прижимается только к низу, но слева, в чем проблема? <?xml version="1.0" encoding="utf-8"?> ...

47
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 18:29
Студворк — интернет-сервис помощи студентам
я могу положить на хостинг . А есть здесь сниппет , на форуме ? или на CODEPEN ? Цель простая : берется картинка и морячка. Все, других картинок нет. Бутерброд : снизу просто картинка, морячка {bottom:0; right:0;}, сверху картинка с id="image". Скрипт видит id="image" и заворачивает его, все остальное не трогает. Морячка появляется верхом на яхте. Конечно, морячка в PNG, она прозрачная и ложится на все, не то что некоторые.
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 18:47
CSS
1
2
3
4
5
6
#frame {position: relative; top: 100px; left: 100px;}
#image, #layer {position: absolute; }
#image {width: 400px; }
#layer {width: 800px; 
       bottom: 0;
        right: 0;  }


HTML5
1
2
3
4
5
6
7
<div id="frame" onmousemove="increase(document.getElementById('image'))">
<img style="position: absolute" src="https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg">
<img id="layer" src="https://www.cyberforum.ru/images/Girl-434-816.png">
<a href="https://ya.ru" alt="Alternate text">
<img id="image" src="https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg">
</a>
</div>
вот мой простой вариант.. Я все могу понять, видите ноги id="layer" ? Это при ширине 800px. Если ее уменьшать, ноги постепенно уходят вправо , за границу страницы.
И при ширине 200px ноги сами уменьшаются, масштаб очевиден, но в браузере только ее белые труселя. Все остальное за границей -- все как и в РФ , все в таких трусах -- все за кордон.
К чему они привязаны ? У страницы нет ширины !
Ноги морячки привязаны к DIV . Но ноги не видят высоту DIV , т.к. ее нет, прямо не указана. Поэтому ноги привязываются к верхней границе DIV. Вот так работает CSS
Миниатюры
Правый край div1 прижать к правому краю div2 через CSS  
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 19:02
у меня только подозрение, что скрипт что-то ломает. Он отрабатывает четко -- onmousemove="increase(document.getElemen tById('image')) (внешний скрипт, там не разобраться) но что происходит с другими объектами на странице -- загадка.
Я с трудом представляю, как все это сочетается на FLEX
0
202 / 126 / 25
Регистрация: 09.01.2022
Сообщений: 458
01.01.2024, 19:05
seregadushka,

Это то, что вам нужно? - смотри фото:
Миниатюры
Правый край div1 прижать к правому краю div2 через CSS  
0
202 / 126 / 25
Регистрация: 09.01.2022
Сообщений: 458
01.01.2024, 19:16
seregadushka,

А не можете ли вы использовать графическую программу, чтобы поместить два изображения друг на друга так, как вы хотите?
И затем просто поместите готовое изображение в html-код!
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 19:22
ivanov_333, коллеги, так и было. Я могу совместить в программе. Но это же самое может делать скрипт, потом с любой картинкой (2 штуки ). Моя идея -- под морячкой копия верхней картинки, так же нагляднее.
Неужели я нашел сложную проблему для современного CSS ??? Если я поменяю исходника картинки, то скрипт сделает свою работу. Скрипт живой, уголок шевелится -- это не тайна -- вот он -- http://www.netzgesta.de/curl/ .
Проще кода не бывает, уже почти все сделано. Морячка уже зажата к права. Как прижать морячку к низу ?
Я уже сам путаюсь. Если в коде указать #frame , #image {width: 400px; } , то морячка прижмется к праву картинки (но СВЕРХУ ЕЕ), но как к низу ???? (я просо сместил DIV на 100рх от угла страницы, чтобы видеть масштаб повреждений этого CSS )
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 19:55
CSS
1
2
3
4
5
6
#frame {position: relative; top: 200px; left: 200px;}
#image, #layer {position: absolute; }
#frame , #image {width: 400px; }
#layer {width: 100px; 
       bottom: 0;
        right: 0;  }
HTML5
1
2
3
4
5
6
7
<div id="frame" onmousemove="increase(document.getElementById('image'))">
<img style="position: absolute" src="https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg">
<img id="layer" src="https://www.cyberforum.ru/images/Girl-434-816.png">
<a href="https://ya.ru" alt="Alternate text">
<img id="image" src="https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg">
</a>
</div>
как сделать одно движение -- <img id="layer"> ВНИЗ ?
Миниатюры
Правый край div1 прижать к правому краю div2 через CSS  
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 20:08
еще заметил в таком режиме, когда все смещено от края страницы. Я думал, что скрипт -- не дурак, и делает только то что ему сказано -- заворачивать только id="image", и только когда мышь шевелится. Но он заворачивает id="image" еще и когда мышь над морячкой ! Точно над ней по контуру . У морячки id="layer" , по идее там нет DIV . Вот пример, когда CSS работает не пойми как.

я уже забыл, когда видел под мышью alt="Alternate text" . Куда он делся, может его уже отключили по всей планете ?
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
4001 / 2175 / 833
Регистрация: 13.03.2010
Сообщений: 7,075
01.01.2024, 20:11
Цитата Сообщение от seregadushka Посмотреть сообщение
Вот пример, когда CSS работает не пойми как.
Работает он ровно так, как вы ему задали. Неумение использовать инструмент не значит, что инструмент - говно.

Я так и не понял что вы хотите сделать. Всё в кучу смешиваете бездумно.
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 20:24
gogolik, как опустить девку на песочек ?
0
202 / 126 / 25
Регистрация: 09.01.2022
Сообщений: 458
01.01.2024, 22:14
seregadushka,

Итак, на мой взгляд, не может быть, чтобы и блок div, и изображения не имели заданной высоты! По крайней мере, хоть блок div должен иметь такая!

И я бы не стал делать все это без установка display: flex;

Вот вес код:

HTML5
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
<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="utf-8">
         <title>Images</title> 
    </head>
        <style>
            #frame {
                background-color: #c3f3e3;
                border: 2px solid teal;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                height: 300px; 
                width: 400px;
                position: relative;
            }
            #image {
                position: absolute; 
                width: 400px;
            }
            #layer {
                position: absolute;
                width: 100px;
            }
        </style>
    <body>  
        <div id="frame" onmousemove="increase(document.getElementById('image'))">
            <img id="image" src="image1.png" alt="image1">
            <img id="layer" src="image2.png" alt="image2">  
        </div>
    </body>
</html>
Вот результат - на фото:

Столько от меня по этой теме!
Миниатюры
Правый край div1 прижать к правому краю div2 через CSS  
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 22:18
ivanov_333, все это очень интересно, но height: 300px; легко поставить. Цель -- только указать адрес 2 картинок.. Тем более position: absolute; можно указать всем объектам -- тоже работает. В смысле, что видит только верхнюю границу DIV {position: absolute; или relative } -- одинаково.
Ширина выступает как масштаб . Если еще и высоту спрашивать, так пусть юзер сам весь сайт напишет
0
202 / 126 / 25
Регистрация: 09.01.2022
Сообщений: 458
01.01.2024, 22:25
Цитата Сообщение от seregadushka Посмотреть сообщение
ivanov_333, все это очень интересно, но height: 300px; легко поставить. Цель -- только указать адрес 2 картинок.. Тем более position: absolute; можно указать всем объектам -- тоже работает
Ширина выступает как масштаб . Если еще и высоту спрашивать, так пусть юзер сам весь сайт напишет
Если высота этого блока div id="frame" неизвестна, вы можете попробовать установить ее в процентах, чтобы она была относительно высоты его родительского блока!

Но, чтобы это работало, высота его родительского блока также должна быть установлена! (Хоть и в процентах)
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 22:30
Когда я ставлю FLEX , девка слева от DIV за границей браузера.

Добавлено через 2 минуты
Цитата Сообщение от ivanov_333 Посмотреть сообщение
Если высота этого блока div id="frame" неизвестна, вы можете попробовать установить ее в процентах, чтобы она была относительно высоты его родительского блока!
у меня нет родительского блока для DIV . Я и так упростил все максимально. Родитель -- страница. Вот проблема.
Единственной высотой во всем этом коде -- высота корабля. Корабли бывают разные. Я указываю только ширину, чтоб ы примерно менять его размер. DIV пустой , это просто тег , не надо спрашивать у него высоту. Она равна высоте картинки с кораблем. Есть его ширина.
0
202 / 126 / 25
Регистрация: 09.01.2022
Сообщений: 458
01.01.2024, 23:09
Цитата Сообщение от seregadushka Посмотреть сообщение
у меня нет родительского блока для DIV . Я и так упростил все максимально. Родитель -- страница. Вот проблема.
Родительского блока для этоgo DIV имеет - это <body>, а для <body> это <html> - он коренновой элемент - посмотрите структуру html-документа:
HTML5
1
2
3
4
5
6
<html>
      <body>    
              <div id="frame" onmousemove="increase(document.getElementById('image'))">
             </div>
     </body>
</html>
И именно поэтому при работе с процентами мы сначала пишем в начале css-файла следующий код:

CSS
1
2
3
4
html, body {
    height: 100%;
    width: 100%;
}
А затем в вашем случае, после этого, вы можете указать размеры div-а, примерно:
CSS
1
2
3
4
div {
    height: 50%;
    width: 50%;
}
Вот и все!
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
01.01.2024, 23:40
про html, body -- это понятно. У меня и так задача совсем простая -- . Так скрипт держит размер картинки , он не позволяет ее менять. Задача упрощается. Не надо делать адаптивный дизайн (нижний кораблю можно растягивать, но здесь это не к чему. ), . Я думал , все просто -- верстка как дет саду, наложить сверху 3 штуки, жесткий бутерброд, и все. С процентами не пробовал, но не особо верю. Да Flex используется только для внешнего блока, все что внутри советуют делать абсолютным. Девка еще накладывается , а заскриптованная картинка с кораблем уже нет . Я не знаю, что там с ней скрипт делает, но он всегда работает. Но положение его хрен поймешь.

У меня без FLEX уже было почти все , кроме дна корабля.
С FLEX я как то словил дно, до угла не добрался, но вижу, скриптовый корабль все равно отдельно.

Добавлено через 1 минуту
я даже понимаю, этот CSS -- для него ничего святого не существует. Если картинки наложены в сверху углами, то пустое пространство для onmousemove он не видит, только сами картинки. И никакие квадраты ему не указ. Откуда он увидит дно DIV , если он не видит внутри себя ничего.

привязка к body через % тоже как то не подходит.
0
202 / 126 / 25
Регистрация: 09.01.2022
Сообщений: 458
02.01.2024, 01:15
seregadushka,

Я решил попробовать вариант с процентами, но я сделал и сброс и всех отступы, и у меня все работает нормально!

Вот код:

HTML5
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
<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="utf-8">
         <title>Images</title> 
    </head>
        <style>
            * {   
                margin: 0;                
                padding: 0;               
                box-sizing: border-box;   
            }
            html, body {
                height: 100%;
                width: 100%;                
            }
            body {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            #frame {
                background-color: #c3f3e3;
                border: 2px solid teal;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                width: 50%; 
                height: 50%;
            }
            #image {
                position: absolute; 
                width: 400px;
            }
            #layer {
                position: absolute;
                width: 100px;
            }
        </style>
    <body>  
        <div id="frame" onmousemove="increase(document.getElementById('image'))">
            <img id="image" src="image1.png" alt="image1">
            <img id="layer" src="image2.png" alt="image2">  
        </div>
    </body>
</html>
Я центрировал блок div посередине экрана. Вот результат - фото 1

И наконец я решил попробовать без высоты - и удалил строка 29 - height: 50%;

Вот результат - фото 2

С ширина div-a 400px - тоже работает! Вообще все работает! Попробуйте и вы тоже!

Если проблема еще есть - то она исходит из скрипта! Потому что CSS работает так, как должен!


В противном случае ситуация оставалась бы такой:
Миниатюры
Правый край div1 прижать к правому краю div2 через CSS   Правый край div1 прижать к правому краю div2 через CSS  
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
02.01.2024, 02:05
ivanov_333, ну прекрасно, Я понимаю. что у вас нет PNG. Я могу дать, если надо, большой размер. Я его долго чистил в Paint.Net , а потом нашелкакой-то online редактор -- типа AI -- он его за секунду отрезал фон.

Я тут и с flexbox и без него, девка привязывается (пости !) , это если удалить скриптованный корабль. Этот кораблю под скриптом выделяется из потока. И что ему ни ставь, он не хочет. У мня уже мозги кипят. Я не понимаю, у меня уже были 2 корабля со скриптами наложены. Но девка не хотела ложиться, Теперь наоборот. Девка лежит, корабль со скриптом не хочет.
Я не понимаю, почему они не перевариваю вместе ?

ivanov_333, у вас все слишком упрощено . Мне надо ТРИ объекта ! У вас нет ссылки вокруг картинки, мелочь, но вэтом чертов примере, ввсе важно !
Вы видите, у меня одна картинка с id="image" и ее же копия, без него. Это важно. Возможно, тут и встречются засады.


CSS
1
2
3
4
5
6
7
8
9
#frame {    top: 200px; 
                left: 200px;  }
                width: 400px;  
                position: absolute;  }
#image  {  position: absolute;  }
#layer   {  width: 100px;  
        position: absolute; 
        bottom: 0;
            right: 0;  }
HTML5
1
2
3
4
5
6
7
8
9
<div id="frame" onmousemove="increase(document.getElementById('image'))">
<img  src="https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg">
<img id="layer" src="https://www.cyberforum.ru/images/Girl-434-816.png">
 
<a href="https://ya.ru" alt="Alternate text">
<img id="image" src="https://www.cyberforum.ru/images/PAPCRUISE2-400-260.jpg">
</a>
 
</div>
код совсем мелкий. Как видно, что девка все-таки привязалась ко дну (там загадочное смещение примерно на 5рх, откуда оно ?) и углу. Это же 2 простых картинки с абсолютных позицией. Конечно, почему ей не привязаться.
Зато если прописать просто display:flex , то девша чуть шевелится и даже попадает точно ногами в дно. Но я большой разницы не заметил, что лучше.

Но сверху не ложится теперь уже ссылка <a></a>. Может надо стили ссылке писать ?

Я шас соберу все, положу исходники . Там и PNG и скрипт.

С этой хренью никогда не интересовался --- box-sizing: border-box; (толку отнее никогда не было) . И не хотелось бы ставить стили для *{} -- все-таки вокруг целый сайт -- как там получится -- неизвестно.
Миниатюры
Правый край div1 прижать к правому краю div2 через CSS  
0
945 / 561 / 299
Регистрация: 07.11.2022
Сообщений: 933
02.01.2024, 02:57
Цитата Сообщение от 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
<!doctype html>
<html>
<head>
<script type="text/javascript" src="curl.js"></script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.frame {
  display: inline-block;
  font-size: 0;
  position: relative;
  background: url("ship.jpg") no-repeat;
}
.frame img {
  display: block;
}
.image {
  position: relative;
  z-index: 1;
}
.layer {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100px;
}
.link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<div class="frame">
  <img src="ship.jpg" class="image curl isize90" title="image" alt="image">
  <img src="girl.png" class="layer" title="layer" alt="layer">
  <a href="https://ya.ru" class="link" title="link"></a>
</div>
</body>
</html>
См в песочнице

Изменяя z-index для .image, .layer и .link можно менять положение соответствующих блоков (какой из них поверх другого). Сейчас выше всех ссылка.
0
35 / 3 / 0
Регистрация: 22.08.2011
Сообщений: 172
02.01.2024, 03:14
rr33rr, не уверен, что разбирусь. Вот с чем я работаю. Там все мелкое, картинки, могу найти оригиналы
Вот Морячка на Я.Диске. вся папка
Жаль. что там нельзя протестить, но архив скачивается.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
02.01.2024, 03:14

Перевернутый текст прижать к правому краю
&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt; ...

Прижать блок к правому краю родителя
Здравствуйте! Есть футер высотой 50px, шириной 100% Должно быть так: внутри футера слева - блок с логотипом, правее него блок со...

Как в QRDBText прижать текст к правому краю?
Как в QRDBText прижать текст к правому краю?

StringGrid: прикрепить правый край последнего столбца к краю таблицы
Двигаю последний столбец влево - справа от него образуется пустота. Как сделать так, чтобы его правый край был прибит к краю таблицы?

Div прижать к правому краю внутри другого, с позицией absolute
Скажите пожалуйста, у меня блок div рисуется по центру экрана, но не занимает всю область Главный #main_block0 { /*...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
40
Ответ Создать тему
Новые блоги и статьи
Транслитерация текста с кириллицы на латиницу (вариант №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, на примере справочника "КонтактныеЛицаПартнеров". Задача: Запрет инициалов. Не допускаеть использование сокращений вида "И. И. ", "И. И. ", "И И" и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru