Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > нижнее выравнивание блоков

Автор: YahоО 19.12.2017, 00:33

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

Код


<style>
.layer1 {
    float: left;
    background: #fd9;    
    margin-right: 2px;
    width: 50px;
}
</style>
<div style="vertical-align: bottom;">  
  <div class="layer1" style="height: 50px"></div>
  <div class="layer1" style="height:170px"></div>
  <div class="layer1" style="height: 10px"></div>
  <div class="layer1" style="height:100px"></div>
</div>

Подскажите как изменить этот код с помощью css
(без canvas, без jquery, без библиотек).

Автор: Mariia 7.4.2018, 12:40

На дворе 2018 год, а всё float. Необходимо использовать Flex.
Для выравнивания по нижнему краю добавь родительскому контейнеру свойства:

Код


display: flex;
align-items: flex-end;

Вот хороший гайд по флексу http://css.yoksel.ru/flexbox/

Автор: YahоО 10.1.2019, 13:42

2019

Mariia, спасибо!