Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/7: Рейтинг темы: голосов - 7, средняя оценка - 5.00
Janosense
44 / 40 / 22
Регистрация: 28.01.2015
Сообщений: 162
1

Вертикальное выравнивание флоатов разной высоты

07.12.2015, 14:36. Просмотров 1295. Ответов 3
Метки нет (Все метки)

Подскажите пожалуйста, ибо туплю и гугл настроился против меня. Как выровнять зафлоаченные блоки разной высоты по вертикали (например по нижнему краю)? Как это сделать без флоатов тучей других методов знаю, интересует решение вопроса именно при такой разметке.
HTML5
1
2
3
4
<div class="page-header clearfix">
     <div class="header-logo"></div>
     <div class="header-menu"></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
.page-header {
    width: 100%;
    height: 100px;
    border: 1px solid #e81313;
    box-sizing: border-box;
}
 
.header-logo {
    float: left;
    width: 30%;
    height: 90px;
    border: 1px solid #000;
    box-sizing: border-box;
}
 
.header-menu {
    float: right;
    width: 70%;
    height: 50px;
    border: 1px solid #000;
    box-sizing: border-box;
}
 
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.12.2015, 14:36
Ответы с готовыми решениями:

Вертикальное выравнивание
Помогите плиз выровнять стрелку, чтобы была по уровню текста. ...

Вертикальное выравнивание
Подскажите пожалуйста, какое использовать тут вертикальное выравнивание ?...

Вертикальное выравнивание
Нужно выровнять в 1 линию вертикально все блоки. Раскрасил для того что бы...

Списки li разной высоты
Добрый день! Помогите решить проблему с списком. Для того, чтобы выравнять 4...

Выравнивание вертикальное по центру
Добрый день! Прочитала очень много на форуме, но так и не нашла решения для...

3
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
07.12.2015, 15:11 2
Цитата Сообщение от Janosense Посмотреть сообщение
Как выровнять зафлоаченные блоки разной высоты по вертикали (например по нижнему краю)?
Природа флоат такова, что элемент всегда будет стремиться стать в верхний левый/правый угол. Следовательно добиться того чего вы хотите можно только костылями,например задание марджин-топ для элементов.
Цитата Сообщение от Janosense Посмотреть сообщение
Как это сделать без флоатов тучей других методов знаю
В чем тогда проблема, замените флоат на инлайн-блок.
Но если сильно хочется флоат, вот
Javascript
1
2
3
$(".page-header > div").each(function(){
  $(this).css("margin-top", $(this).parent().height() - $(this).outerHeight() + "px");
});
http://jsfiddle.net/shakalaka/jdv183uk/
1
Janosense
44 / 40 / 22
Регистрация: 28.01.2015
Сообщений: 162
07.12.2015, 15:18  [ТС] 3
Цитата Сообщение от Shakalaka Посмотреть сообщение
В чем тогда проблема, замените флоат на инлайн-блок.
Это я для собственного развития спрашиваю. Мне кажется что есть простой способ решения этого вопроса, а я просто его забыл)))
Маржинами пододвинуть можно, но не хочется к ним привязываться.
0
Анар
194 / 194 / 79
Регистрация: 12.09.2015
Сообщений: 900
07.12.2015, 19:24 4
Janosense, может быть:
CSS
1
2
3
4
.page-header {
    display:flex;
    align-items:flex-end;
}
Ничего проще я как бы и не знаю.
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
07.12.2015, 19:24

Вертикальное выравнивание текста
Подскажите, как правильно нужно вертикально выровнять текст, изображённый на...

Вертикальное выравнивание текста
Всем привет! Как сделать так чтобы текст стал ровно по середине? #main{...

Простое вертикальное выравнивание
Нужно выровнить по центру(вертикально): &lt;style type=&quot;text/css&quot;&gt; .block {...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru