将 div 定位到父 div 的底部

Question

您好，我希望有人可以帮助我解决这个相当简单的问题。

\n\n

为什么div内容 \xe2\x82\xac1.230 没有在 div 底部对齐chart-p？

\n\n

期望的行为是整体chart-r位于底部。这样空白区域就位于上方而div不是下方。

\n\n

\r\n

\r\n

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

\r\n

<div class="chart-p">\r\n  <div class="chart-r" style="height:115px;">\r\n    \xe2\x82\xac 1.230</div>\r\n  <div class="chart-z" style="height:236px;">\r\n    \xe2\x82\xac 2.280</div>\r\n</div>

\r\n

\r\n

\r\n

\n

Answer 1

使用position:absolute而不是相对。

\n\n

\r\n

\r\n

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

\r\n

<div class="chart-p">\r\n  <div class="chart-r" style="height:115px;">\r\n    \xe2\x82\xac 1.230</div>\r\n  <div class="chart-z" style="height:236px;">\r\n    \xe2\x82\xac 2.280</div>\r\n</div>

\r\n

\r\n

\r\n

\n