Podium CSS: 定位元素在他们 div 的底部

Question

我正在尝试使用 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>

Answer 1

不需要使用 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>

Answer 2

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

 position:absolute;
 bottom:70px;

Podium CSS: 定位元素在他们 div 的底部

Podium CSS: position elements at the bottom of their div

html

css

position

vertical-alignment