Podium CSS：将元素定位在其 div 的底部答案

【问题标题】：Podium CSS: position elements at the bottom of their divPodium CSS：将元素定位在其 div 的底部
【发布时间】：2019-09-06 11:34:24
【问题描述】：

我正在尝试使用 CSS 和 HTML 创建一个讲台。我已经通过将position: relative 添加到父亲并将position: absolute; bottom: 0 添加到步骤来将讲台的台阶定位在底部，但是由于我想在台阶上方显示一个文本，我在定位这个文本时遇到了问题在那里。

我的第一个方法是将文本和步骤放在一个 div 上并绝对定位这个 div，但是随着步骤的高度是他们父亲的百分比，父亲需要有一个 height: 100% 属性，所以 div解决方案无效。

这里附上我的代码sn-p：

@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>

【问题讨论】：

请使用 Stackoverflow 的 HTML/CSS/JS Snippet 以便我们能够复制/运行您的代码。
@robinvrd 抱歉，我以为它会自动显示。如何将其添加到问题中？
您在编辑器中的粗体、下划线、...、链接、代码等按钮旁边有一个按钮。
您在.step-container 上定义width: 100%，即col-md-4（这意味着将宽度设置为页面的1/3），首先这是没有意义的。我会从头开始给你一个答案。
谢谢，现在可以运行sn-p了

标签： html css position vertical-alignment

【解决方案1】：

正如已经指出的那样，您可能可以从头开始并更好地构建它。但是如果你想保持原样，那么只需给包含文本的 div 一个类并给它们以下属性：

 position:absolute;
 bottom:70px;

【讨论】：

【解决方案2】：

无需使用position:absolute，只需使用 flexbox 和 flex-columns。

然后将文本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>

【讨论】：

这正是我所要求的。非常感谢您的回答和 sn-p。