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

正如已经指出的那样，您可能可以从头开始，并使其结构更好一些。但是，如果您希望保持原样，则只需为包含文本的divs提供一个类，并为其提供以下属性：

 position:absolute;
 bottom:70px;

Podium CSS：将元素放置在其div的底部

2 个答案: