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并不是最好的解决方案。

args()

#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;
  }
}

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

将文本放在底部的右对齐div容器中

4 个答案: