и снова про вертикальное выравнивание в div

@-=Den=- · Регистрация: 03.04.2011

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

есть конструкция вида:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="1">
     <div class="2">
          <div class="3">
               <h3>текст</h3>
          </div>
     </div>
     <div class="4">картинка</div>
     <div class="5">текст</div>
     <div class="6">кнопки</div>
</div>

как прижать текст в заголовке <h3> к нижнему краю <div class="3">?

делал так:

CSS
1
2
3
4
5
6
7
8
9
div.2 {
     position: absolute;
     width: 100%;
     height: 50px;
}
div.3 {
     position: relative;
     bottom: 0px;
}

но, в этом случае, дивы 4,5,6 становятся выше дива 3

@kvant355 · 07.06.2014, 16:01

на сколько я помню имена div-блоков не могут состоять только из цифр, у вас могут просто не читаться стили

Добавлено через 1 минуту
попробуйте так

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="a1">
     <div class="a2">
          <div class="a3">
               <h3>текст</h3>
          </div>
     </div>
     <div class="a4">картинка</div>
     <div class="a5">текст</div>
     <div class="a6">кнопки</div>
</div>

CSS
1
2
3
4
5
6
7
.a2 {
     position: absolute;
}
.a3 {
     position: relative;
     bottom: 0px;
}

@aj17 · 07.06.2014, 16:15

НУ во первых действительно НИкогда не пишите имя класса цифрой! Если нужно то лучше словами написать: one two three four five...В Вашем случае (как я понял) что бы прижать h3 ненужно никаких position, добавьте в ваш css такой код:

CSS
1
*{margin:0 padding=:0;}

скопировать нужно как есть вместе со звёздочкой.

@-=Den=- · 07.06.2014, 19:10 **[ТС]**

они не цифрами написаны, а вполне осмысленными названиями. это я тут для простоты цифрами обозначил

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

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

CSS
1
*{margin:0 padding=:0;}

какой-то странный код... может, все-таки

CSS
1
*{margin:0; padding:0;}

но все равно не помогло

@wLight · 07.06.2014, 20:07

-=Den=-, не понятно, что ты хочешь, у div 3, нету размера, к какому краю ты собрался прижать текст?
если хочешь просто опустить можно то используй padding,

CSS
1
h3 {padding-top: 40px;}

@kvant355 · 07.06.2014, 20:11

как я понял вам надо чтобы тег <a> заполнял все пустое пространство блока вокруг текста, автоматически увеличивался при увеличении блока и любое место этого блока было ссылкой, верно?

@-=Den=- · 07.06.2014, 22:26 **[ТС]**

wLight, я хочу, чтобы div 3 был прижат к нижнему краю див 2. Размера у него нет, потому что текст, содержащийся в нем, может быть разного объема, а, т.к. ширина див 1 фиксированная, то высота текста в див 3 будет разная. Поэтому, вариант с padding тоже не прокатит.

@kvant355 · 07.06.2014, 22:45

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

как я понял вам надо чтобы тег <a> заполнял все пустое пространство блока вокруг текста, автоматически увеличивался при увеличении блока и любое место этого блока было ссылкой, верно?

простите, ошибся темой

вот по вашему вопросу как то так...

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="a1">
     <div class="a2">
          <div class="a3">
               <span>текст</span>
          </div>
     </div>
     <div class="a4">картинка</div>
     <div class="a5">текст</div>
     <div class="a6">кнопки</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.a2 {
    position: relative;
    min-height: 100px; 
    background: #a5a5a5;
}
.a3 {
     position: absolute;
     padding:0;
     bottom: 0px;
     font-weight: bold;
   background: #efefef;
}

@-=Den=- · 08.06.2014, 15:26 **[ТС]**

kvant355, спасибо, все получилось

Новые блоги и статьи Все статьи Все блоги /
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 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@kvant355 43 / 43 / 25 Регистрация: 21.07.2013 Сообщений: 367
	07.06.2014, 20:11
	как я понял вам надо чтобы тег <a> заполнял все пустое пространство блока вокруг текста, автоматически увеличивался при увеличении блока и любое место этого блока было ссылкой, верно? 0

@-=Den=- 7 / 7 / 2 Регистрация: 03.04.2011 Сообщений: 176
	07.06.2014, 22:26 [ТС]
	wLight, я хочу, чтобы div 3 был прижат к нижнему краю див 2. Размера у него нет, потому что текст, содержащийся в нем, может быть разного объема, а, т.к. ширина див 1 фиксированная, то высота текста в див 3 будет разная. Поэтому, вариант с padding тоже не прокатит. 0

@-=Den=- 7 / 7 / 2 Регистрация: 03.04.2011 Сообщений: 176
	08.06.2014, 15:26 [ТС]
	kvant355, спасибо, все получилось 0

и снова про вертикальное выравнивание в div

Решение