将文本放在底部的右对齐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 ^^