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

Question

Я пытаюсь выровнять все дочерние элементы div вниз. Я использовал метод dispalay:table and table-cell (который я нашел в сети), но это не работает для меня. Я также пробовал некоторые другие методы, но не мог сделать это. Вот LINK и моя структура кода:

HTML:

<div class="a"> 
    <div class="c"></div> 
    <div class="b"> 
    <div class="al" style="background:green;"></div> 
    <div class="al" style="background:blue;"></div> 
    <div class="al" style="background:tan;"></div> 
    </div> 
</div> 

CSS:

.a{ 
    float: left; 
    background: red; 
    display: table; 
    padding-right: 1px; 
    height: 100%; 
} 
.b{ 
    position: relative; 
    float: left; 
    background: blue; 
    display: table; 
    height: 100%; 
    width: 29px; 
} 
.c{ 
    height: 300px; 
    width: 90px; 
    background: grey; 
    float: left; 
} 
.al{ 
    margin-top: 2px; 
    background: yellow; 
    display: table-cell; 
    width: 100%; 
    height: 30px; 
    padding: 20px; 
    vertical-align: bottom; 
} 

Вот Link of Code

Answer 1

Если вы хотите, чтобы выровнять содержимое .b на дно , вы можете использовать

.b { 
    display: table-cell; 
    vertical-align: bottom; 
} 

Полный код:

.a { 
 
    display: table; 
 
    padding-right: 1px; 
 
    background: red; 
 
} 
 
.b { 
 
    display: table-cell; 
 
    vertical-align: bottom; 
 
    width: 29px; 
 
    background: blue; 
 
} 
 
.c { 
 
    display: table-cell; 
 
    height: 300px; 
 
    width: 90px; 
 
    background: grey; 
 
} 
 
.al { 
 
    margin-top: 2px; 
 
    height: 30px; 
 
    padding: 20px; 
 
}

<div class="a"> 
 
    <div class="c"></div> 
 
    <div class="b"> 
 
    <div class="al" style="background:green;"></div> 
 
    <div class="al" style="background:blue;"></div> 
 
    <div class="al" style="background:tan;"></div> 
 
    </div> 
 
</div>