html - 将十五个子 DIV 作为元素符号对齐到其父 Div 的底部

Question

我正在编辑 slider 的元素符号。我想在元素符号的父 div 上应用渐变背景，所以我需要增加父 div 的高度，但是当我增加高度时，所有元素符号都在父 div 的顶部对齐。

HTML

<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>

CSS

.parent {
height: 200px;
background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgb(27, 4, 4));
width: 100%; 
text-align: center;
bottom: 0;
position: absolute;
}
.child {
background-color: blue;
width: 25px;
height: 5px;
margin-left: 2px;
display: inline-block;
}

请告诉我如何对齐父 div 底部的所有元素符号。

JSFIDDLE

Answer 1

使用 flexbox，你可以很容易地对齐它们:

.parent {
  height: 200px;
  background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgb(27, 4, 4));
  width: 100%;
  text-align: center;
  bottom: 0;
  position: absolute;
  display: flex;
  align-items: flex-end; /*put them at the bottom*/
  justify-content: center; /*center horizontally*/
  flex-wrap:wrap;
  align-content: flex-end;
}

.child {
  background-color: blue;
  width: 25px;
  height: 5px;
  margin: 5px;
}

body {
  margin: 0;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>