gpt4 book ai didi

html - 如何将元素锁定到容器(方形)中的 div 底部?

转载 作者:太空宇宙 更新时间:2023-11-04 08:19:38 27 4
gpt4 key购买 nike

 * {
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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com