Выравнивание картинок сверху снизу плавающего блока

@deca · Регистрация: 04.02.2016

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

Добрый день, никогда раньше не обращался на форумы за советами, но сегодня что-то заклинило меня
Есть структура html

HTML5
1
2
3
4
5
6
7
8
9
<div class="g-content">
<div class="l-left">
<p>Просто П</p>
<p>Просто П и таких П в этом блоке много</p>
</div>
<div class="l-right">
<img scr="https://www.cyberforum.ru/images/test.jpg">
<img scr="https://www.cyberforum.ru/images/test2.jpg">
</div>

Блок l-left плавает слево
Блок l-right плавает справо

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

Пробовал через js что бы сначала определялись равные высоты блоков и потом относительно полученной высоты выравнивать сами картинки, в принципе работает но при загрузке страницы скрипт сразу не срабатывает, поэтому первые несколько секунд при загрузке картинки находятся выше блока l-right

Заранее благодарю за ответ

@Fedor92 · 04.02.2016, 18:24

deca, а зачем Вы темы плодите?

Стили в студию...

@deca · 04.02.2016, 18:31 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="g-container">
    <div class="l-left">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="l-right">
        <div class="b-absolute-img1">
            <img src="/images/test.jpg" alt="" />
        </div>
 
        <div class="g-clear_fix"></div>
        
        <div class="b-absolute-img2">
            <img src="/images/test2.jpg" alt="" />
        </div>
    </div>
</div>

CSS
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
.g-container{
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}
.l-left{
    float: left;
    width: 69%;
}
.l-right{
    position: relative;
    float: left;
    width: 30%;
}
.b-absolute-img1, .b-absolute-img2{
    position: absolute;
    left:0;
}
.b-absolute-img1 img, .b-absolute-img2 img{
    width: 100%;
    max-width: 352px;
}
.b-absolute-img1{
    top: 10px;
}
.b-absolute-img2{
    bottom: 75px;
}

@Fedor92 · 04.02.2016, 19:08

deca, типа так?

Кликните здесь для просмотра всего текста

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <title>Nowrap</title>
    <style>
html, body{width:100%; height:100%; margin:0}
div{display:flex}
 
.g-container{
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
    min-height:100%
}
.l-left{
    float: left;
    width: 69%;
 
}
.l-right{
    position: relative;
    float: left;
    width: 30%;
}
.b-absolute-img1, .b-absolute-img2{
    position: absolute;
    left:0;
}
.b-absolute-img1 img, .b-absolute-img2 img{
    width: 100%;
    max-width: 352px;
}
.b-absolute-img1{
    top: 10px;
}
.b-absolute-img2{
    bottom: 75px;
}
    </style>
</head>
<div class="g-container">
    <div class="l-left">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <div class="l-right">
        <div class="b-absolute-img1">
            <img src="/images/test.jpg" alt="" />
        </div>
 
        <div class="g-clear_fix"></div>
        
        <div class="b-absolute-img2">
            <img src="/images/test2.jpg" alt="" />
        </div>
    </div>
</div>
</body>
</html>

@deca · 04.02.2016, 20:27 **[ТС]**

Fedor92, Спасибо, немного не так, но взял за основу ваш совет display: flex
Может кому понадобится вот есть как вариант решение, при загрузке блоки с картинками не разваливаются, а при получение высоты блока ставятся картинки 1 сверху одна снизу

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
<div class="g-container">
    <div class="l-left j-height">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
    
    <div class="l-right j-height">
        <div class="b-absolute-img1">
            <img src="test1.jpg" alt="" />
        </div>
        
        <div class="b-absolute-img2">
            <img src="test2.jpg" alt="" />
        </div>
    </div>
</div>

CSS
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
.g-container{
    margin: 0 auto;
    width: 100%;
    max-width: 1100px;
}
.l-left {
    float: left;
    width: 65%;
}
.l-right {
    display: flex;
    flex-wrap: wrap;
    float: left;
    width: 34%;
}
.b-absolute-img2 {
    display: flex;
    height: 49%;
}
.b-absolute-img1 {
    align-self: flex-start;
    width: 100%;
    margin: 10px 0 0 0;
    height: 49%;
}
.b-discovery .b-absolute-img2 img {
    align-self: flex-end;
}
.b-discovery .b-right-img-up img, .b-discovery .b-right-img-bottom img{
    width: 352px;
    width: 100%;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function setHeight(col){
    var param = 0;
    col.each(
        function(){
            thisHeight = $(this).height();
            if(thisHeight > param){
                param = thisHeight;
            }
        }
    );
    col.height(param);
}
 
$(document).ready(function(){
                    if(window.innerWidth >= 768){
                        setHeight($('.j-height'));
                    }
});

@Jolly1371 · 09.03.2017, 22:03

Fedor92: я скопировала ваш код, но почему то ничего не вижу. Что я сделала ни так?

@Fedor92 · 09.03.2017, 22:08

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

Что я сделала ни так?

Сейчас достану магический шар и начнём...

Во-первых, что именно копировали и что не получилось? Код, скрины, всё что есть в студию, что поможет понять Вашу проблему...

@Jolly1371 · 10.03.2017, 12:41

https://jsfiddle.net/z4xjowuo/ ,что-то совсем не собранная

, думала, что отправила.

@Fedor92 · 10.03.2017, 13:22

Jolly1371, в Вашем примере надо задать высоту для блока l-right...

Не по теме:

P.S. Слайдер я уже соорудил, если что... :)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	04.02.2016, 18:24
	deca, а зачем Вы темы плодите? Стили в студию... 0

@Jolly1371 0 / 0 / 0 Регистрация: 09.03.2017 Сообщений: 38
	09.03.2017, 22:03
	Fedor92: я скопировала ваш код, но почему то ничего не вижу. Что я сделала ни так? 0

@Jolly1371 0 / 0 / 0 Регистрация: 09.03.2017 Сообщений: 38
	10.03.2017, 12:41
	https://jsfiddle.net/z4xjowuo/ ,что-то совсем не собранная, думала, что отправила. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	10.03.2017, 13:22
	Jolly1371, в Вашем примере надо задать высоту для блока l-right... Не по теме: P.S. Слайдер я уже соорудил, если что... :) 0