* {
box-sizing: border-box;
}
.publication {
display: flex;
width: 100%;
margin-top: 6%;
}
.bottom1,
.bottom2 {
display: flex;
flex-direction: column;
}
.bottom1 {
width: 70%;
}
.publicationleft {
width: 700px;
height: 130px;
border-radius: 25px;
padding: 15px;
background: #C7D3DF;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
}
.publicationbottom {
width: 700px;
height: 70px;
border-radius: 25px;
padding: 15px;
background: #769DBD;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
text-align: center;
color: #fff;
padding-top: 0px;
text-decoration: none;
}
.textpub {
color: #365A6B;
font-size: 14px;
}
.link {
position: relative;
bottom: 0;
}
<div class="bottom1">
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
<div class="link"><a href="https://www.google.com/"><font color="white">Link</font></a></div>
</div>
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
<a href="https://www.google.com/"><font color="white">Link</font></a>
</div>
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo.</div>
<a href="https://www.google.com/"><font color="white">Link</font></a>
</div>
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
<a href="https://www.google.com/"><font color="white">Link</font></a>
</div>
</div>
如何将元素 (在本例中为链接) 锁定到 div 的左下角 (在本例中为圆 Angular 正方形) ?
所以基本上,链接必须锁定在圆 Angular 正方形的左下角。
有人知道解决办法吗? 我用 position: relative 试了一下。没用。它一直到容器的最底部。
最佳答案
根据您的问题,我想您希望将“链接”绝对定位在其父项的底部。为此,只需使用:
.link {
position: absolute;
bottom: 0;
}
请注意,您还必须将父级设置为 position: relative
:
.publicationleft {
position: relative;
}
这是您的概念验证示例:
* {
box-sizing: border-box;
}
.publication {
display: flex;
width: 100%;
margin-top: 6%;
}
.bottom1,
.bottom2 {
display: flex;
flex-direction: column;
}
.bottom1 {
width: 70%;
}
.publicationleft {
width: 700px;
height: 130px;
border-radius: 25px;
padding: 15px;
background: #C7D3DF;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
/* To allow link to be absolutely positioned */
position: relative;
}
.publicationbottom {
width: 700px;
height: 70px;
border-radius: 25px;
padding: 15px;
background: #769DBD;
color: #fff;
margin-left: 5%;
margin-bottom: 10px;
text-align: center;
color: #fff;
padding-top: 0px;
text-decoration: none;
}
.textpub {
color: #365A6B;
font-size: 14px;
}
.link {
position: absolute;
bottom: 0;
}
<div class="bottom1">
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
<div class="link"><a href="https://www.google.com/"><font color="white">Link</font></a></div>
</div>
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
<a href="https://www.google.com/"><font color="white">Link</font></a>
</div>
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo.</div>
<a href="https://www.google.com/"><font color="white">Link</font></a>
</div>
<div class="publicationleft">
<div class="textpub">FamoS – Fahrradverkehrsmodelle als Planungsinstrument zur Reorganisation des Straßenraums (2016-2018) Unter besonderer Berücksichtigung des Radverkehrs werden multimo </div>
<a href="https://www.google.com/"><font color="white">Link</font></a>
</div>
</div>
关于html - 如何将元素锁定到容器(方形)中的 div 底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45635146/