html - 响应式页脚设计 - 包装页脚元素

Question

我正在尝试编写响应式页脚。页脚元素由竖线 (|) 分隔。当我们减小屏幕尺寸时，页脚元素换行到第二行。竖线 (|) 只需要位于页脚项之间。此外，对于较大的屏幕尺寸，facebook Logo 需要与页脚元素位于同一行，对于较小的屏幕尺寸，则需要位于中心。我使用了 float:right 但现在它们从头开始换行。如果竖线 (|) 不在页脚元素之间，我如何让它们从末尾开始换行并隐藏竖线 (|)？

这是我的源代码:https://jsfiddle.net/6kcdvteo/

body {
  font-family: 'Calibri';
}

.text {
  font-size: 1rem;
  padding: 1rem 1rem 2rem 2rem;
  color: #666666;
  background-color: #f4f4f4;
}

.footer {
  font-size: 0.85rem;
  padding: 2rem 1rem 2rem 2rem;
  background-color: #303741;
  color: white;
}

.footer_company {
  float: right;
  padding-right: 2rem;
}

.footer_links {
  font-size: 0.85rem;
  background-color: #303741;
  color: white;
  padding-bottom: 2rem;
  padding-right: 2.5rem;
}

.footer_links_span span {
  background-color: #303741;
  padding-right: 0.5rem;
  float: right;
}

img {
  height: 3rem;
  width: 3rem;
}

.img {
  padding-left: 1rem;
  display: inline-block;
}

<div class="text">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac cursus felis, ut egestas lacus. Sed nec elementum ipsum. Morbi metus est, venenatis at libero pharetra, suscipit posuere dolor. Proin a auctor nulla, sed tincidunt tellus. Nullam bibendum
    luctus elit, sed porttitor lectus varius in. Cras venenatis rutrum urna at ultrices. Sed in luctus ligula.
  </p>
</div>

<div class="footer">
  <span class="footer_company">© My Company Name</span>
</div>

<div class="footer_links">
  <div class="img">
    <img src="https://image.flaticon.com/icons/png/512/124/124010.png">
  </div>
  <div class="footer_links_span">
    <span>Sed metus</span>
    <span>|</span>
    <span>Aenean ultricies</span>
    <span>|</span>
    <span>Praesent vitae</span>
    <span>|</span>
    <span>Donec auctor</span>
    <span>|</span>
    <span>Vestibulum lobortis</span>
  </div>
</div>

Answer 1

作为你问题的一部分，你可以使用这个

<div class="footer_links">
  <div class="img">
    <img src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="">
  </div>
  <div class="footer_links_span">
    <span><b>|</b> Sed metus</span>
    <span><b>|</b> Aenean ultricies</span>
    <span><b>|</b> Praesent vitae</span>
    <span><b>|</b> Donec auctor</span>
    <span><b>|</b> Vestibulum lobortis <b>|</b></span>
  </div>
</div>

用这个CSS

/* container */
.footer_links {
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  background-color: #303741;
  color: white;
}
/* clearfix floats */
.footer_links::after {
  display: block;
  clear: both;
  content: "";
}
/* facebook img */
.img {
  float: left;
}
.img img {
  width: 3rem;
  height: auto;
  border: 0;
}
/* links */
.footer_links_span {
  float: right;
  width: calc(100% - 3.5rem);
  text-align: right;
}
.footer_links_span span {
  display: inline-block;
  white-space: nowrap;
  background-color: #303741;
}
.footer_links b {
  padding: 0 0.2rem;
  font-weight: inherit;
}
.footer_links_span span:first-child b {
  padding-left: 0;
}
.footer_links_span span:last-child b {
  padding-right: 0;
}

也许它会帮助您朝着正确的方向前进。