Выравнивание 3 div по краям

@SerjioTT · Регистрация: 27.01.2016

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

Привет!
Помогите ребус решить пожалуйста
Есть 3 div внутри родительского, div1 и div2 делят родительский по ширине 40/60% а div3 нужно прижать к нижнему краю родительского так чтобы он не создавал новой строки
обсалютное позиционировани не подходит т.к. div2 может быть любой высоты
vertical-align не действует на div3 хотя все дивы пробовал делать inline-block

@Resume · 27.01.2016, 10:38

Так сойдет ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
<div class="container">
<div class="div1">
</div>
<div class="div2">
</div>
<div class="div3">
</div>
</div>
</body>
</html>

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
33
34
35
36
37
38
39
body,html{
padding:0;
margin:0;
}
 
.container{
height:500px;
width:100%;
background:red;
padding:20px;
border:1px solid black;
position:relative;
}
 
.div1,.div2,.div3{
background:green;
border:1px solid black;
float:left;
}
 
.div1{
width:40%;
height:500px;
margin-right:10px;
}
 
.div2{
width:58%;
height:250px;
}
 
.div3{
width:56.5%;
height:50px;
position: absolute;
bottom: 20px;
right:30px;
float:right;
}

@PticaOgnennaya · 27.01.2016, 10:41

HTML5
1
2
3
4
5
<div class="main">
  <div class="div1">div1</div>
  <div class="div2">div2</div>
  <div class="div3">div3</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
.main{
  height: 200px;
  position:relative;
}
 
.div1{
  width: 60%;
  position:absolute;
  height: 100%;
  left: 0px;
  background: yellow;
}
 
.div2{
  background: green;
  width: 40%;
  position:absolute;
  height: 30%;
  right: 0px;
}
 
.div3{
  background: blue;
  width: 40%;
  position:absolute;
  height: 30%;
  bottom: 0px;
  right: 0px;
}

@SerjioTT · 27.01.2016, 10:46 **[ТС]**

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

@Resume · 27.01.2016, 10:59

тогда margin-top/margin-bottom используйте!

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

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
33
34
35
36
body,html{
padding:0;
margin:0;
}
 
.container{
height:500px;
width:98.4%;
background:red;
padding:10px;
border:1px solid black;
}
 
.div1,.div2,.div3{
background:green;
border:1px solid black;
float:left;
}
 
.div1{
width:40%;
height:100%;
margin-right:10px;
}
 
.div2{
width:58%;
height:50%;
}
 
.div3{
width:58%;
height:10%;
margin:-50px 15px 10px 0;
float:right;
}

@SerjioTT · 27.01.2016, 11:44 **[ТС]**

margin-top добавляет просто отступ от нижнего края div2 чего не хотелось бы т.к. это иконка и она получается плавающей по высоте. задача в том чтобы прилепить div3 именно к нижнему краю общего контейнера
margin-bottom не возымел действия
float: left тоже не желателен т.к. при уменьшении ширины контейнера блоки встают друг под друга и лепятся к левой стороне, а нужно чтобы они в такой ситуации красивенько становились друг под друга по центру контейнера.

@Resume · 27.01.2016, 11:50

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

при уменьшении ширины контейнера блоки встают друг под друга

в данной ситуации блоки логично себя ведут.

остается вариант:
position:relative;

Если и он не покатит, тогда я не знаю как помочь

@SerjioTT · 27.01.2016, 12:07 **[ТС]**

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

в данной ситуации блоки логично себя ведут.

да, согласен, логично конечно.

эх, неужели нет решения как прилепить блок к нижней границе родительского без абсолютного позиционирования?!

я уже упростил задачу - обернул div2 и 3 в дополнительный div4, который нужно сделать высотой = 100% от родительского или = высоте div1 и затем прилепить div2 к верхней границе div4, а div3 - к нижней

только height: 100% не увеличивает высоту блока

@aj17 · 27.01.2016, 12:28

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>Document</title>
</head>
<style>
    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    .left{width: 40%;}
    
    .right{width: 60%; position: relative;}
    
    .one{padding: 10px; border: 1px solid red; display: table-cell;}
    
    .left div{margin-bottom: 10px;}
    
    .content{ margin-bottom: 70px; border: 1px solid green; padding: 10px;}
    
    .footer{height: 70px; background: red; position: absolute; bottom: 10px; left: 10px; right: 10px; padding: 10px; color: #fff;}
</style>
<body>
    <div class="row">
        <div class="left one">
            <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, sapiente, quo, expedita eius molestiae tempore doloribus nihil dignissimos recusandae non harum aperiam quis nam aliquam hic culpa est vero esse.</div>
            <div>Saepe, doloremque, cupiditate maxime sed excepturi aspernatur beatae. Rerum, a sit dolore eos nulla cum odio magni quam consequatur explicabo cupiditate voluptatem reiciendis fugit laborum ullam officiis ipsam aut? Amet.</div>
            <div>Cupiditate, ratione saepe minima quidem aspernatur quod ipsam fugiat facere asperiores molestiae libero tempore repellat dicta fuga aliquam dolore modi voluptatem quia quisquam porro magni numquam id ea provident dolorem.</div>
            <div>Quis, porro consectetur quae quas quasi consequuntur magnam molestias provident velit eligendi iusto dolorem vitae tempore odit repellendus fugit cumque ducimus maxime laborum explicabo. Laudantium, minus numquam excepturi soluta explicabo.</div>
            <div>Vero, ipsa magnam consequatur quisquam quidem hic consequuntur voluptas reiciendis aliquam eaque odio fugit et maiores voluptates quia quas nemo nisi suscipit velit autem sapiente aliquid animi vel porro est?</div>
            <div>Error, temporibus, placeat unde reprehenderit amet ut minima labore exercitationem eveniet cum dolore iusto molestias mollitia natus nihil quam ab quos dolorum! Dicta, error, ipsum ut molestias repellat eligendi modi!</div>
            <div>Aperiam, magni iusto necessitatibus. Cumque, nostrum repudiandae corporis maxime esse sequi ducimus sint deleniti et dolore beatae quia molestias voluptatem totam facilis tempore obcaecati placeat recusandae sapiente quos debitis tenetur?</div>
        </div>
        
        <div class="right one">
            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, nesciunt suscipit delectus modi asperiores pariatur harum totam eaque praesentium porro dolore natus nemo architecto consequatur voluptatum eveniet labore obcaecati necessitatibus!</div>
            <div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, commodi, a, ducimus, repellat animi similique dolor quis error obcaecati nihil dolores incidunt voluptates molestias minima aspernatur ab quod perspiciatis placeat!</div>
        </div>
    </div>
</body>
</html>

Посмотрите, такая логика Вам подходит?

@Fedor92 · 27.01.2016, 13:17

SerjioTT, верстайте таблицей и будет Вам счастье...

@SerjioTT · 27.01.2016, 14:42 **[ТС]**

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

Посмотрите, такая логика Вам подходит?

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

Code
1
2
3
4
5
#div3 {
    position: absolute;
    bottom: -0.5em;
    right: 27%;
}

при ширине экрана менее 960px position меняется на initial

Code
1
2
3
4
5
6
7
8
#div2 {
    display: inline-block;
    padding: 0.5em;
    max-width: 60%;
    min-width: 60%;
    text-align: left;
    margin-bottom: 3%; //! чтобы не налезал на нижний блок даже когда места не хватает
}

@aj17 · 27.01.2016, 15:01

А приложите файлик. Любопытно что у вас там) Просто

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

только левый блок начинает маштабироваться при уменьшении ширины окна

У вас в задаче ничего про адаптивность не сказанно) Но за-то даны размеры для блоков а они в %

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

div1 и div2 делят родительский по ширине 40/60%

По этому и сжимается блок)

@SerjioTT · 27.01.2016, 15:28 **[ТС]**

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

даны размеры для блоков а они в %

это я для упрощения написал, может и зря) там на самом деле картинка где 40%

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

Любопытно что у вас там

можно вот тут посмотреть

@siyanie · 27.01.2016, 15:45

SerjioTT, Я конечно не уверен, но сайт долго как-то грузится. Посмотрите в сторону оптимизации.

@Karssen · 27.01.2016, 15:49

SerjioTT, https://jsfiddle.net/u1h9ocxe/ такое решение не подойдет?

HTML5
1
2
3
4
5
6
7
<div class="container">
  <div class="div1"></div>
  <div class="inner">
    <div class="div2"></div>
    <div class="div3"></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
.container{
  width:100%;
  background-color:#a3a3a3;
  display:flex;
}
.div1{
  width:40%;
  min-height:500px;
  border:1px solid red;
  box-sizing:border-box;
}
.inner{
  width:60%;
  border:1px solid green;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.div2, .div3{
  width:100%;
  border:1px solid yellow;
  min-height:100px;
}

@SerjioTT · 27.01.2016, 16:36 **[ТС]**

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

такое решение не подойдет?

похоже что подойдёт, спасибо!!! и похоже что как раз то что я искал

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

долго как-то грузится

да, это иконки с внешнего ресурса, я в курсе, благодарю
уже убираю

@Resume · 27.01.2016, 16:55

С некоторыми браузерами могут возникнуть:IE<10 and старые версии Chrome. Можно использовать следующую библиотеку:
https://github.com/postcss/autoprefixer

@SerjioTT · 27.01.2016, 17:01 **[ТС]**

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

С некоторыми браузерами могут возникнуть:IE<10 and старые версии Chrome

с какими именно элементами? flex?
классная библиотека! спасибо, не знал о такой

@siyanie · 27.01.2016, 17:04

SerjioTT, display: flex, то что вам дал Karssen

@Resume · 27.01.2016, 17:06

тебе Karssen, скинул пример, который тебя устроил полностью.
Я скинул тебе ссылку на библиотеку, потому что flexbox в перечисленных браузерах(версиях их) не поддерживается.

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@SerjioTT 0 / 0 / 0 Регистрация: 27.01.2016 Сообщений: 12

	Выравнивание 3 div по краям 27.01.2016, 10:11. Показов 2966. Ответов 20 Метки нет (Все метки) Привет! Помогите ребус решить пожалуйста Есть 3 div внутри родительского, div1 и div2 делят родительский по ширине 40/60% а div3 нужно прижать к нижнему краю родительского так чтобы он не создавал новой строки обсалютное позиционировани не подходит т.к. div2 может быть любой высоты vertical-align не действует на div3 хотя все дивы пробовал делать inline-block 0

@SerjioTT 0 / 0 / 0 Регистрация: 27.01.2016 Сообщений: 12
	27.01.2016, 10:46 [ТС]
	не, я же писал, что абсолютное позиционирование не подходит т.к. div2 может быть любой высоты и когда в div2 будет много текста, то он перекроет div3, который останется висеть на тех же координатах 0

@SerjioTT 0 / 0 / 0 Регистрация: 27.01.2016 Сообщений: 12
	27.01.2016, 11:44 [ТС]
	margin-top добавляет просто отступ от нижнего края div2 чего не хотелось бы т.к. это иконка и она получается плавающей по высоте. задача в том чтобы прилепить div3 именно к нижнему краю общего контейнера margin-bottom не возымел действия float: left тоже не желателен т.к. при уменьшении ширины контейнера блоки встают друг под друга и лепятся к левой стороне, а нужно чтобы они в такой ситуации красивенько становились друг под друга по центру контейнера. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	27.01.2016, 13:17
	SerjioTT, верстайте таблицей и будет Вам счастье... 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	27.01.2016, 15:45
	SerjioTT, Я конечно не уверен, но сайт долго как-то грузится. Посмотрите в сторону оптимизации. 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	27.01.2016, 16:55
	С некоторыми браузерами могут возникнуть:IE<10 and старые версии Chrome. Можно использовать следующую библиотеку: https://github.com/postcss/autoprefixer 1

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	27.01.2016, 17:04
	SerjioTT, display: flex, то что вам дал Karssen 0

@Resume 143 / 133 / 69 Регистрация: 08.11.2013 Сообщений: 767 Записей в блоге: 5
	27.01.2016, 17:06
	тебе Karssen, скинул пример, который тебя устроил полностью. Я скинул тебе ссылку на библиотеку, потому что flexbox в перечисленных браузерах(версиях их) не поддерживается. 0