將文本放在底部的右對齊div容器中

Question

我有一個壓印頁腳，它將版權容器放在較大屏幕尺寸的右側。

只要版權在右側對齊，我希望其文本在底部垂直對齊。

我該如何實現？ 我嘗試了vertical-align:bottom但這沒有幫助。

注意 ：您可能必須在全屏模式下打開代碼段，因為在較小的屏幕尺寸上會刪除flexbox。

 #imprint { display: flex; justify-content: space-between; background: #2f333b; color: #ffffff; } #imprintContainer { display: flex; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 50px; } .link { text-decoration: none; color: #29abe2; } .link:hover { color: #3abcf3; } @media(max-width: 1200px) { #imprint { display: block; } } @media(max-width: 700px) { #imprintContainer { display: block; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 0; } } 

 <div id="imprint"> <div id="imprintContainer"> <div class="imprintItem"> <p>Company</p> <p>Street <br>City</p> </div> <div class="imprintItem"> <p> <a class="link" href="mailto:test">Email</a> </p> <p> Read our <a class="link" href="/privacy">Privacy</a> </p> </div> </div> <div class="imprintItem"> <p> © Copyright 2018 </p> </div> </div> 

Answer 1

只需添加以下樣式：

.imprintItem.copy{
    align-self: flex-end;
}

然后將“ copy”添加為版權div的類。

Answer 2

使用align-self與版權元

 #imprint { display: flex; justify-content: space-between; background: #2f333b; color: #ffffff; } #imprintContainer { display: flex; } .imprintItem { align-self:flex-end; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 50px; } .link { text-decoration: none; color: #29abe2; } .link:hover { color: #3abcf3; } @media(max-width: 1200px) { #imprint { display: block; } } @media(max-width: 700px) { #imprintContainer { display: block; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 0; } } 

 <div id="imprint"> <div id="imprintContainer"> <div class="imprintItem"> <p>Company</p> <p>Street <br>City</p> </div> <div class="imprintItem"> <p> <a class="link" href="mailto:test">Email</a> </p> <p> Read our <a class="link" href="/privacy">Privacy</a> </p> </div> </div> <div class="imprintItem"> <p> © Copyright 2018 </p> </div> </div> 

Answer 3

試試這個設置。 我所做的更改：我將copyrightHolder作為類添加到了
包含版權段落的<div> 。

對於版權段落，我添加了copyright ID。 有關樣式的定義，請參見CSS

如問題所示：將下面的演示擴展到全屏，以便在操作中看到flex 。

 .copyrightHolder { position: relative; } #copyright { position: absolute; bottom: 0; right: 0; white-space: nowrap; } #imprint { display: flex; justify-content: space-between; background: #2f333b; color: #ffffff; } #imprintContainer { display: flex; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 50px; } .link { text-decoration: none; color: #29abe2; } .link:hover { color: #3abcf3; } @media(max-width: 1200px) { #imprint { display: block; } } @media(max-width: 700px) { #imprintContainer { display: block; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 0; } } 

 <div id="imprint"> <div id="imprintContainer"> <div class="imprintItem"> <p>Company</p> <p>Street <br>City</p> </div> <div class="imprintItem"> <p> <a class="link" href="mailto:test">Email</a> </p> <p> Read our <a class="link" href="/privacy">Privacy</a> </p> </div> </div> <div class="imprintItem copyrightHolder"> <p id="copyright"> © Copyright 2018 </p> </div> </div> 

Answer 4

不是最好的解決方案。 但我覺得。 您在這里所做的所有事情……使用flex並不是最好的解決方案。

 #imprint { display: flex; justify-content: space-between; background: #2f333b; color: #ffffff; } #imprintContainer { display: flex; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 50px; } #imprint > .imprintItem { position:relative; } #imprint > .imprintItem p { position:absolute; bottom:0; right:0; } .link { text-decoration: none; color: #29abe2; } .link:hover { color: #3abcf3; } @media(max-width: 1200px) { #imprint { display: block; } } @media(max-width: 700px) { #imprintContainer { display: block; } #imprintContainer .imprintItem:not(:first-child) { margin-left: 0; } } 

 <div id="imprint"> <div id="imprintContainer"> <div class="imprintItem"> <p>Company</p> <p>Street <br>City</p> </div> <div class="imprintItem"> <p> <a class="link" href="mailto:test">Email</a> </p> <p> Read our <a class="link" href="/privacy">Privacy</a> </p> </div> </div> <div class="imprintItem"> <p> © Copyright 2018 </p> </div> </div> 

...現在我看到了..第一個答案是相同的...但是在我的代碼中。 您不必更改html ^^