[英]Paragraph Bottom Right of Div
我有兩個div,每個div的右下角都有一個段落鏈接。 當我添加代碼bottom: 0; position: absolute;
bottom: 0; position: absolute;
,它將兩個鏈接放到最右邊的div中,而不是將它們保留在自己的div中。 如何設置此值,以使鏈接保留在右下角自己的容器內?
.header-unit { height: 300px; position: relative; margin-top: 5px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("/images/liberty.jpg"); } #messageContainer { margin-left: 200px; /* padding-top: 450px; */ position: relative; display: inline-block; } h1 { font-family: 'Montserrat', sans-serif; font-size: 2em; line-height: 1.15; text-transform: uppercase; } #knowledge, #practice { padding: 25px; width: 350px; height: 300px; display: block; color: #fff; } .linksect { bottom: 0; right: 25px; position: absolute; } #knowledge { background: #8b8b8b; } #practice { background: #554a58; } .indexheader { font-family: 'Montserrat', sans-serif; font-size: 2em; line-height: 1.15; text-transform: uppercase; color: #554a58; } .firmvalues { margin-top: 50px; }
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <div class="header-unit"> <div id="messageContainer" class="w3-row"> <div id="knowledge" class="w3-col l6"> <h1>Knowledge. Experience. Commitment. </h1> <p>The attorneys of ....</p> <p class="linksect"><a href="/page/3/attorneys">Our Attorneys <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> </div> <div id="practice" class="w3-col l6"> <h1>Practice Areas</h1> <p>Business and Commercial Law<br> Insurance Coverage and Indemnity Law<br> Medical and Dental Malpractice<br> Probate Law and Practice<br> and more...</p> <p class="linksect"><a href="/page/2/practices">Practice Areas <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> </div> </div> </div>
您可以通過向您希望絕對定位的元素相對的祖先元素添加非靜態position屬性來為position:absolute
提供上下文。 position:relative
通常是一個不錯的選擇,因為它將元素保留在文檔流中。 (請注意,我已將其添加到#knowledge,#practice
規則中。)
.header-unit { height: 300px; position: relative; margin-top: 5px; background-size: cover; background-position: center; background-repeat: no-repeat; background-image: url("/images/liberty.jpg"); } #messageContainer { margin-left: 200px; /* padding-top: 450px; */ position: relative; display: inline-block; } h1 { font-family: 'Montserrat', sans-serif; font-size: 2em; line-height: 1.15; text-transform: uppercase; } #knowledge, #practice { padding: 25px; width: 350px; height: 300px; display: block; color: #fff; position: relative; } .linksect { bottom: 0; right: 25px; position: absolute; } #knowledge { background: #8b8b8b; } #practice { background: #554a58; } .indexheader { font-family: 'Montserrat', sans-serif; font-size: 2em; line-height: 1.15; text-transform: uppercase; color: #554a58; } .firmvalues { margin-top: 50px; }
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" /> <div class="header-unit"> <div id="messageContainer" class="w3-row"> <div id="knowledge" class="w3-col l6"> <h1>Knowledge. Experience. Commitment. </h1> <p>The attorneys of ....</p> <p class="linksect"><a href="/page/3/attorneys">Our Attorneys <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> </div> <div id="practice" class="w3-col l6"> <h1>Practice Areas</h1> <p>Business and Commercial Law<br> Insurance Coverage and Indemnity Law<br> Medical and Dental Malpractice<br> Probate Law and Practice<br> and more...</p> <p class="linksect"><a href="/page/2/practices">Practice Areas <span class="fa fa-angle-double-right" aria-hidden="true"></span></a></p> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.