將div定位到父div的底部

你好，我希望有人可以幫助我，而我猜，簡單的問題。將div定位到父div的底部

爲什麼div的內容€1.230不對齊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>

來源

2017-04-19 Rotan075

您的意思是文本或容器的高度...如果它的高度然後嘗試添加相同的高度：兩個 –

添加'position：absolute; bottom：0;'到.chart-r類 – Felix

這是默認行爲，如果你需要定位在底部，你需要遵循#fekix –

使用position:absolute而不是相對。

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

來源

2017-04-19 10:01:59

這是正確的修復！ – Rotan075

這是標準行爲。您可以將圖表-R元素上使用一個簡單的vertical-align:bottom;如果你想在底部

來源

2017-04-19 09:56:41

添加到您的代碼

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

工作例如：

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

來源

2017-04-19 09:57:01

我認爲這不適用'divs'。每天我都會學到新的東西！謝謝:) – Rotan075

.chart-r不是在.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; 
 
}

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

希望這有助於！

來源

2017-04-19 10:05:28

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

添加對齊項：FLEX-結束到主DIV來解決問題。

來源

2017-04-19 12:53:08

將div定位到父div的底部

回答

相關問題