将div定位到父div的底部

Question

Hello I hope someone can help me with this rather, I guess, simple question.

Why is the div with content €1.230 not aligned at the bottom of the chart-p div?

The desired behaviour is that the whole chart-r is positioned to the bottom. So that the white space is above the div instead of below.

 .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

add this to your code

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

Working example :

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

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

.chart-r isn't at the bottom of .chart-p because there is nothing pushing it down.

You can either add margin-top to .chart-r which is probably the solution you need. Or you could add display: flex and flex-direction: row to the parent element and align-self: flex-end to the child element you want to have on the bottom of the graph, like this:

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

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

Hope this helps!

Answer 3

That's standard behaviour. You can use a simple vertical-align:bottom; on your chart-r element if you want it at the bottom

Answer 4

Use position:absolute instead of 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> 

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>

Add align-items:flex-end to the main div to solve problem.