Я редактирую маркеры слайдера. Я хочу применить градиентный фон к родительскому 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

0
Iftek Har 19 Сен 2018 в 11:49

2 ответа

Лучший ответ

Используйте 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>
1
Temani Afif 19 Сен 2018 в 09:22

Не уверен, что я понимаю, что вы ищете, но если вы хотите, чтобы эти строки находились внизу родительского 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/

0
ShamPooSham 19 Сен 2018 в 09:18