Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как отформатировать вложенные div 
:(
    Опции темы
annarns
Дата 10.7.2018, 03:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Доброго времени суток
Я только начала осваивать js и столкнулась с такой проблемой.

есть код, хотелось бы блоки внутри первого блока отформатировать по нижнему краю[U][/U].
Но никак не получается. Прошу помощи опытных товарищей.

код:[B][B][/B][/B]
Код

<!-- Как сделать выравнивание по низу блоков внутри блока -->
<style>
    #parent {
        height: 300px;
        width: 100%;
        border: 1px grey dotted;
    }
    
    #child1 {
        float: left;
        height: 100px;
        width: 10%;
        background: red;
        margin-right: 10px;
    }
    
    #child2 {
        float: left;
        height: 200px;
        width: 10%;
        background: blue;
        margin-right: 10px;
    }
</style>

<div id='parent'>
    <!-- Количество детей и их ширина заранее точно не известны. Высота меняется от 0 до 300 px -->
    <div id='child1'></div>
    <div id='child2'></div>
</div>


Что делаю не так?
PM MAIL   Вверх
ksnk
Дата 10.7.2018, 08:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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



http://site-on.net/create/html/6-vertical-align

По примеру - флоты в чилдах не нужны. И вот такое правило нужно добавить 
Код

    #child1, #child2 {
      vertical-align:bottom;
      display:inline-block;
    }






--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
ksnk
Дата 10.7.2018, 10:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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



Воттолько непонятно что тема делает в javascript. Или нужно решить ее позиционированием скриптом?


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
_zorn_
Дата 10.7.2018, 14:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

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



Цитата(ksnk @  10.7.2018,  15:26 Найти цитируемый пост)
vertical-align:bottom;

Эм, а это уже работает для чего то кроме таблиц ? Вертикальное выравнивание только костылями делалось до флекса.
PM MAIL   Вверх
ksnk
Дата 10.7.2018, 19:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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



Вертикальное выравнивание посредине делалось костылями, и сейчас довольно костыльно, а прижать к верху-низу было несложно, вроде. Хотя могу уже всего не упомнить smile 


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
annarns
Дата 11.7.2018, 00:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Ну да, в итоге всё это планируется на JS.

Спасибо всем неравнодушным, пойду совершенствовать код smile  smile 

Спасибо!
PM MAIL   Вверх
ksnk
Дата 11.7.2018, 08:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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



annarns, Если скриптом, то нужно все внутренние дивы объявить position:absolute и прижимать их к нужным сторонам контейнера с position:relative соответствующими top/bottom/left/right. При этом, не забывая об уже вложенных элементах и "прикладывать" со смещением, чтобы он влезли. Будет неслабый головняк, когда окажется, что контейнер резинов и за его изменением нужно следить, еще смешнее - когда и некоторые вложения тоже резиновы и меняют свой размер. 




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »


 




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


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

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