您好,我希望有人可以帮我解决这个问题,我想这是一个简单的问题。
为什么内容为€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;
答案 0 :(得分:2)
将此添加到您的代码
.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;
}
&#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;
答案 1 :(得分:2)
.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>
&#13;
Public Sub a(b as Date?)
'Somecode
End Sub
&#13;
希望这有帮助!
答案 2 :(得分:1)
这是标准行为。 如果您想在底部
,可以在chart-r元素上使用简单的vertical-align:bottom;
答案 3 :(得分:1)
使用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%;
}
&#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;
答案 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 以解决问题。