html - 将 div 定位到父 div 的底部

Question

您好，我希望有人能帮我解决这个问题，我想是个简单的问题。

为什么内容为 €1.230 的 div 没有在 chart-p div 的底部对齐？

所需的行为是将整个 chart-r 定位到底部。这样空白就在 div 上方而不是下方。

.chart-p {
    width: 300px;
    display: block;
    height: 236px;
    position: relative;
    background-color: lightblue;
}
.chart-r {
    margin-right: 1.5%;
    background-color: #E5F1F9;
}
.chart-r, .chart-z {
    display: inline-block;
    width: 48%;
    background-color: #FEE9A9;
    position: relative;
    top: 0px;
    left: 0;
}

<div class="chart-p">
  <div class="chart-r" style="height:115px;">
    € 1.230</div>
  <div class="chart-z" style="height:236px;">
    € 2.280</div>
</div>

Answer 1

使用 position:absolute 而不是 relative。

.chart-p {
    width: 300px;
    display: block;
    height: 236px;
    position: relative;
    background-color: lightblue;
}
.chart-r {
    margin-right: 1.5%;
    background-color: #E5F1F9;
}
.chart-r, .chart-z {
    display: inline-block;
    width: 48%;
    background-color: #FEE9A9;
    position: absolute;
    bottom: 0px;
    left: 0;
}
.chart-z{
      left: 50%;
}

<div class="chart-p">
  <div class="chart-r" style="height:115px;">
    € 1.230</div>
  <div class="chart-z" style="height:236px;">
    € 2.280</div>
</div>