将div定位到父div的底部

时间:2017-04-19 09:51:53

标签: html css

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

为什么内容为€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>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:2)

将此添加到您的代码

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

工作示例:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:2)

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

您可以将.chart-r添加到display: flex,这可能是您需要的解决方案。或者,您可以将flex-direction: rowalign-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;
&#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;
&#13;
&#13;

希望这有帮助!

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

使用position:absolute代替亲戚。

&#13;
&#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;
&#13;
&#13;

答案 4 :(得分:1)

   <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 以解决问题。