响应式页脚设计-包装页脚项目

问题描述 投票：0回答：2

我正在尝试编写一个响应性的页脚。页脚项目由竖线（|）分隔。当我们减小屏幕尺寸时，页脚项将换行到第二行。竖线（|）只需要位于页脚项目之间。同样，对于较大的屏幕尺寸，facebook徽标也必须与页脚项目位于同一行，对于较小的屏幕尺寸，facebook徽标必须位于中心。我使用了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>

预期结果：

enter image description here

enter image description here

enter image description here

html css responsive-design footer
2个回答
0
投票

作为问题的一部分，您可以使用此

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

也许它将为您提供正确的方向。

0
投票

这将解决您的问题，但它是Bootstrap :)您的所有响应式屏幕截图均在此代码中实现。不需要额外的CSS布局。

编辑：包含的样式用于链接块的宽度，并用于在小屏幕上隐藏管道符号。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style type="text/css">
#footerSocial img { width: 3rem; margin-bottom: 0.5rem; }
#footerLinks > div { max-width: 350px; margin: auto; }
#footerLinks .dv { font-weight: inherit; display: none; }
@media (min-width: 576px) {
  #footerSocial img { margin-bottom: 0; }
  #footerLinks > div { max-width: none; padding-left: 100px; }
}
@media (min-width: 768px) {
  #footerLinks > div { padding-left: 0; }
  #footerLinks .dv { display: inline; }
}
</style>
</head>
<body>

<div class="container-fluid bg-secondary text-white">
  <div class="row py-3">
    <div class="col-12 text-center">
      <h1 class="mb-2">Company Name</h1>
    </div>
  </div>
</div>

<div class="container">
  <div class="row py-3">
    <div class="col-12 ">
      <h2>Article</h2>
      <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>
</div>

<div class="container-fluid bg-dark text-white">
  <div class="row px-2 py-3">
    <div id="footerSocial" class="col-12 col-sm-2 text-center text-sm-left">
      <img class="img-fluid bg-white" src="https://image.flaticon.com/icons/png/512/124/124010.png" alt="FB">
    </div>
    <div id="footerLinks" class="col-12 col-sm-10 text-center text-sm-right">
      <div>
        &copy; Company Name<br>
        <span class="text-nowrap">Sed metus</span>
        <span class="text-nowrap">| Aenean ultricies</span>
        <span class="text-nowrap">| Praesent vitae</span>
        <span class="text-nowrap"><b class="dv">| </b>Donec auctor</span>
        <span class="text-nowrap">| Vestibulum lobortis</span>
      </div>
    </div>
  </div>
</div>

</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.