Как разместить картинку(или текст) по нижнему краю блока(float)?

Question

[celoran]

Нужно расположить картинку таким образом

Выравнивание по правому краю работает, а vertical-align:bottom; нет, точнее выравнивался только текст, и то по нижнему краю самой картинки, а не блока. Блок с заданной шириной и высотой.
Можно сделать отступ сверху, что бы картинка сдвинулась вниз, но такой костыль мне не нравится.

Answer 1

[lightalex]

Есть два варианта:
1) Cделать через фон. Тогда background-position: 100% 100%;
2) Сделать вот такую структуру с кодом:

<style>
div.table {
width: 100px;
height: 50px;
display: table;
}
div.logo {
width: 100%;
height: 100%;
display: table-cell;
text-align: right;
vertical-align: bottom;
}
</style>
<div class="table">
  <div class="logo"><img/></div>
</div>

3) display: flex;

Comments

[celoran]

Спасибо, а насчет float, я только начал изучать css и html, поэтому сначала хочу разобраться и с float, и с inline-block, и с версткой на div'ах

И сразу вопрос, где можно почитать на русском про flex и что это за зверь такой, как он работает и как применять?

[lightalex]

css.yoksel.ru/flexbox
Вообще хороший сайт про html и css - htmlbook.ru
Но почему-то flex'а там нет
Лично я редко использую float, так что не смогу вам ничего толкового рассказать про него
Он не совсем удобен
inline-block используется чтобы вставить блок в строку
Допустим вы создали div-кнопку и хотите чтобы эта кнопка была в прямо в тексте
По умолчанию у всех div display: block
Значит перед и после блока будут переносы
А чтобы убрать эти переносы используется inline-block

[celoran]

lightalex: Спасибо

[Евгений Петров]

lightalex: Потому что htmlbook для школоты.

[lightalex]

Евгений Петров: ну не знаю
Мне нравится, но школотой себя не ощущаю
Использую как небольшую шпаргалку

[Евгений Петров]

lightalex: Есть vjoytqibq https://developer.mozilla.org/en-US/docs/Web/CSS
Не считая родных W3C спецификаций, коих по CSS уже более 50-60 штук.

[lightalex]

Евгений Петров: ну это все понятно, про это все знаю
Ну просто душе ближе :)
В принципе какая разница где я посмотрю к примеру поддержку браузерами?

[celoran]

Я использую webref.ru/css как справочник, но про flex тут тоже нету.

[lightalex]

celoran: ну да, в принципе без разницы
Каждому свое :)

Answer 2

[Назар Мокринский]

Выбросьте float на помойку, используйте display: flex, или абсолютно позиционированный блок внутри относительно позиционированного если совсем никак.

Comments

[Тимофей Белоусов]

а как же ie9 ?

[Назар Мокринский]

Тимофей Белоусов: Я поддерживаю две последние версии любого популярного браузера, IE не исключение, девятая версия безнадежно устарела.

[Тимофей Белоусов]

это очень очень плохо.

Answer 3

[Тимофей Белоусов]

Все куда проще, чем вы думаете!