Question

我正在用滑块的项目符号进行编辑。我想在子弹的父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>

Answer 2

不确定我了解您要查找的内容，但是如果您希望这些行位于父div的底部，则可以创建另一个容器div，将其位置设置为absolute并将bottom设置为0。您还将需要找到一种解决方案以将其水平对齐，例如将容器宽度设置为100％。

HTML

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

CSS

.container {
  position: absolute;
  bottom: 0;
  width: 100%;
}

https://jsfiddle.net/1b2fuyvm/27/

将15个子DIV作为子弹对齐其父Div的底部

2 个答案: