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

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

Форум программистов > JavaScript: для новичков > Как отформатировать вложенные div

Автор: annarns 10.7.2018, 03:21

Доброго времени суток
Я только начала осваивать 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>

Что делаю не так?

Автор: ksnk 10.7.2018, 08:26

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

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

Код


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

Автор: ksnk 10.7.2018, 10:24

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

Автор: _zorn_ 10.7.2018, 14:38

Цитата(ksnk @ 10.7.2018, 15:26

)

vertical-align:bottom;

Эм, а это уже работает для чего то кроме таблиц ? Вертикальное выравнивание только костылями делалось до флекса.

Автор: ksnk 10.7.2018, 19:59

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

Автор: annarns 11.7.2018, 00:12

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

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

Спасибо!

Автор: ksnk 11.7.2018, 08:52

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