Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> нижнее выравнивание блоков 
:(
    Опции темы
YahоО
Дата 19.12.2017, 00:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 196
Регистрация: 11.6.2015

Репутация: нет
Всего: 1



Доброго времени суток.
Хотелось бы изобразить гистограмму, но рисунок получается перевернутым. В приведенном ниже коде надо что то изменить, чтобы выравнивание нескольких блоков происходило по нижнему краю, т.е. что то типа 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, без библиотек).
PM MAIL   Вверх
Mariia
Дата 7.4.2018, 12:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 23
Регистрация: 7.4.2018

Репутация: нет
Всего: нет



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

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

Вот хороший гайд по флексу http://css.yoksel.ru/flexbox/
PM MAIL WWW   Вверх
YahоО
Дата 10.1.2019, 13:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 196
Регистрация: 11.6.2015

Репутация: нет
Всего: 1



2019 smile
Mariia, спасибо!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0949 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.