Positionierung div nach unten von Elternteil div

Question

Hallo Ich hoffe, jemand kann mir mit dieser eher, denke ich, einfache Frage helfen.

Warum ist die div mit Inhalt € 1.230 nicht an der Unterseite der chart-p div ausgerichtet?

Das gewünschte Verhalten ist, dass das ganze chart-r nach unten positioniert ist. Damit ist der Leerraum oberhalb der div statt darunter.

.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

Verwenden Sie position:absolute anstelle von relativ.

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

Das Standardverhalten ist. Sie können einen einfachen vertical-align:bottom; auf Ihrem Diagramm-r-Element verwenden, wenn Sie es am unteren

Answer 3

fügen Sie diese in Ihren Code

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

Arbeitsbeispiel wollen:

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

.chart-r ist nicht am unteren Rand des .chart-p, weil es nichts es drückt, ist nach unten.

können Sie entweder hinzufügen margin-top-.chart-r das ist wahrscheinlich die Lösung, die Sie benötigen. Oder Sie könnten hinzufügen display: flex und flex-direction: row auf das übergeordnete Element und align-self: flex-end dem Kind Element, das Sie auf der Unterseite des Graphen haben wollen, wie folgt aus:

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

hoffe, das hilft!

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> 

hinzufügen align-Artikel: flex-End zum Haupt div Problem zu lösen.