Подиум CSS: позиционирование элементов внизу - PullRequest
Новая
       16

Подиум CSS: позиционирование элементов внизу

1 голос
/ 16 апреля 2019

Я пытаюсь создать подиум, используя CSS и HTML.Мне удалось расположить ступени подиума внизу, добавив position: relative к отцу и position: absolute; bottom: 0 к ступеням, но, поскольку я хочу отобразить текст чуть выше ступеней, у меня возникают проблемы с позиционированием этого текста.там.

Мой первый подход состоял в том, чтобы поместить текст и шаг в div и позиционировать абсолютно этот div, но, как только ступеньки вырастают в процентах от своего отца, отцу нужно иметь height: 100%свойство, поэтому решение div недействительно.

Здесь я прикрепляю свой фрагмент кода: 

@font-face {
    font-family: DaggerSquare;
    src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf")  format("truetype");
}

#podium-box {
	width: 100%;
	margin: 0 auto;
}

.podium-number {
	font-family: DaggerSquare;
	font-weight: bold;
	font-size: 4em;
	color: white;
}

.step-container {
	width: 100%;
  	position: relative;
}

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

.bg-blue {
	background-color: #063b65;
}

#first-step {
	height: 50%;
}

#second-step {
	height: 35%;
}

#third-step {
	height: 30%;
}

.centerBoth {
    display: flex;
    justify-content: center;
    align-items: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="import" type="css" href="podium-chart.css">

<div id="podium-box" class="row" style="height: 400px">
	<div class="col-md-4 step-container m-0 p-0">
		<div>
			Text 2
		</div>
		<div id="second-step" class="bg-blue step centerBoth podium-number">
			2	
		</div>
	</div>
	<div class="col-md-4 step-container m-0 p-0">
		<div>
			Text 1
		</div>
		<div id="first-step" class="bg-blue step centerBoth podium-number">
			1
		</div>
	</div>
	<div class="col-md-4 step-container m-0 p-0">
		<div>
			Text 3
		</div>
		<div id="third-step" class="bg-blue step centerBoth podium-number">
			3
		</div>
	</div>
</div>

Ответы [ 2 ]

2 голосов
/ 16 апреля 2019

Не нужно использовать position:absolute, просто используйте flexbox и flex-колонки.

Затем нажмите текстовый div внизу. 

@font-face {
  font-family: DaggerSquare;
  src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf") format("truetype");
}

#podium-box {
  margin: 0 auto;
  display: flex;
}

.podium-number {
  font-family: DaggerSquare;
  font-weight: bold;
  font-size: 4em;
  color: white;
}

.step-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.step-container>div:first-child {
  margin-top: auto;
  text-align: center;
}

.step {
  text-align: center;
}

.bg-blue {
  background-color: #063b65;
}

#first-step {
  height: 50%;
}

#second-step {
  height: 35%;
}

#third-step {
  height: 30%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="import" type="css" href="podium-chart.css">

<div id="podium-box" class="row" style="height: 300px">
  <div class="col-md-4 step-container m-0 p-0">
    <div>
      Text 2
    </div>
    <div id="second-step" class="bg-blue step centerBoth podium-number">
      2
    </div>
  </div>
  <div class="col-md-4 step-container m-0 p-0">
    <div>
      Text 1
    </div>
    <div id="first-step" class="bg-blue step centerBoth podium-number">
      1
    </div>
  </div>
  <div class="col-md-4 step-container m-0 p-0">
    <div>
      Text 3
    </div>
    <div id="third-step" class="bg-blue step centerBoth podium-number">
      3
    </div>
  </div>
</div>
0 голосов
/ 16 апреля 2019

Как уже указывалось, вы, вероятно, могли бы начать с нуля и структурировать это немного лучше. Но если вы хотите оставить все как есть, просто дайте элементам div, содержащим текст, класс и присвойте им следующие атрибуты: 

 position:absolute;
 bottom:70px;
...