1. 首页
  2. 问答
  3. 如何将元素锁定到容器（方形）中的div的底部？

如何将元素锁定到容器（方形）中的div的底部？

2017-08-11 46 views
0

如何将元素锁定到容器（方形）中的div的底部？

* { 
 
     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的 （圆角正方形在这种情况下）？

所以基本上，链接必须被锁定在圆角正方形的左下角。

任何人都知道解决方案吗？ 我试过与positsion：相对。没有工作。它一直持续到容器的最底部。

来源

2017-08-11 Lego

+0

对不起，我不明白你需要什么？请简要说明。 –

+0

所以你有浅蓝色的正方形，其中显示了一些文字和链接。现在链接在文本下方。无论如何，我都希望链接永久留在蓝色方块的机器人中。我不想使用p标签或任何。 – Lego

+0

.link { position：absolute; bottom：0; }和.publicationleft {position：relative;} –

回答

1

根据你的问题，我想你想绝对的位置在其父母的底部的“链接”。要做到这窝，只需使用：

.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>

来源

2017-08-11 12:29:13 Terry

+0

@Muhammad他在问题中说：“如何锁定一个元素（在这种情况下是链接）到**一个div **的左下角（在这种情况下是圆角正方形）？“ （重点是我的）。我认为你误解了这个问题。 – Terry

+0

你是对的。从我的投票中获得好的解决方案。 ;） – Muhammad

0

您可以将flexbox a次使用的ALIGN自或边距： 更新：

bottom1, 
.bottom2, 
.publicationleft/* added */ { 
    display: flex; 
    flex-direction: column; 
} 
.link { 
    position: relative; 
    margin-top: auto;/* or align-self:flex-end */ 
    border:solid;/*see me for demo*/ 
/*bottom:0; removed */ 
/* text-align:right; optionnal */ 
}

演示下面

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.publication { 
 
    display: flex; 
 
    width: 100%; 
 
    margin-top: 6%; 
 
} 
 

 
.bottom1, 
 
.bottom2, 
 
.publicationleft { 
 
    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; 
 
    margin-top: auto;/* or lign-self:flex-end */ 
 
    border:solid;/*see me for demo*/ 
 
}
<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>

来源

2017-08-11 12:31:40

0

所以你会希望去了解这个问题的方法是设置父容器（在这种情况下为publicationleft）至：

position: relative;

然后为您的孩子容器（在这种情况下link），你可以使用：

position: absolute; 
bottom: 0; 
left: 0;

您可以了解更多关于此方法here。

来源

2017-08-11 12:33:01

0

替换下面两种风格与此

.publicationleft { 
    position: relative; 
    width: 700px; 
    height: 130px; 
    border-radius: 25px; 
    padding: 15px; 
    background: #C7D3DF; 
    color: #fff; 
    margin-left: 5%; 
    margin-bottom: 10px; 
} 

.link { 
    position: absolute; 
    bottom: 0; 
}

来源

2017-08-11 12:35:05 Yogesh

相关问题

 相关问题