我正在尝试使用position: absolute
和bottom:0; right:0
将div放到另一个div的底部,但是它不起作用,因为div和div之间仍然留有一小块空间底部。
#weekly-product-container {
margin-top: 91px;
background: black;
padding-top: 20px !important;
width: 100vw;
min-height: 500px;
text-align: center;
border-left: 1px solid #eee;
display: flex;
flex-direction: row;
background-color: black;
color: white;
margin-top: 100px;
}
#triangle5 {
width: 0px;
height: 0px;
border-left: 300px solid transparent;
border-bottom: 200px solid red;
border-bottom-right-radius: none;
bottom: 0;
position: absolute;
right: 0;
}
<div id="weekly-product-container">
<div id="triangle5"></div>
</div>
答案 0 :(得分:1)
在容器上设置position: relative;
:
#weekly-product-container {
margin-top: 91px;
background: black;
padding-top: 20px !important;
width: 100vw;
min-height: 500px;
text-align: center;
border-left: 1px solid #eee;
display: flex;
flex-direction: row;
background-color: black;
color: white;
margin-top: 100px;
position: relative;
}
#triangle5 {
width: 0px;
height: 0px;
border-left: 300px solid transparent;
border-bottom: 200px solid red;
border-bottom-right-radius: none;
bottom: 0;
position: absolute;
right: 0;
}
&#13;
<div id="weekly-product-container">
<div id="triangle5"></div>
</div>
&#13;
答案 1 :(得分:1)
您需要做的就是添加位置:相对; to weekly-product-container并更改 bottom:0; for triangle5:
#weekly-product-container {
position: relative;
}
#triangle5 {
position: absolute;
bottom: 0;
}