Question

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

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

所需的行为是整个chart-r位于底部。因此，空格位于div之上而不是下方。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

将此添加到您的代码

.chart-r {vertical-align:bottom;}

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

.chart-p不在margin-top的底部，因为没有任何东西可以将其推倒。

您可以将.chart-r添加到display: flex，这可能是您需要的解决方案。或者，您可以将flex-direction: row和align-self: flex-end添加到父元素，将.chart-p { width: 300px; height: 236px; /* Flexbox */ display: flex; flex-direction: row; position: relative; background-color: lightblue; } .chart-r { margin-right: 1.5%; background-color: #E5F1F9; /* Align at end of flex */ align-self: flex-end; } .chart-r, .chart-z { display: inline-block; width: 48%; background-color: #FEE9A9; position: relative; top: 0px; left: 0; }添加到图表底部的子元素，如下所示：

＆＃13;

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

＆＃13;

Public Sub a(b as Date?)
   'Somecode
End Sub

＆＃13;

希望这有帮助！

Answer 3

这是标准行为。如果您想在底部

，可以在chart-r元素上使用简单的vertical-align:bottom;

Answer 4

使用position:absolute代替亲戚。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 5

   <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>
        <style>
        .chart-p {
          width: 300px;
          height: 236px;
          display: flex;
          flex-direction: row;
          align-items:flex-end;
          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;
        }</style>

将 align-items：flex-end 添加到主 div 以解决问题。

将div定位到父div的底部

5 个答案: