Question

我有问题.. 我正试图制作我的页脚栏，但它不是很顺利。

版权标志，年份和我的名字在左边，社交图标必须在右边。我无法解决这个问题！ ;（我不能把它漂到右边。

如果有人知道它是如何工作的，请做出反应！：d

＆＃13;

footer {
  width: 100%;
  height: 50px;
  clear: both;
  background-color: #303030;
  color: #868686;
  position: relative;
}
footer span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
}
.footerwidth {
  width: 80%;
  margin: 0 auto;
}
.icons {
  float: right;
  width: 150px;
}

＆＃13;

<footer>

  <div class="footerwidth">
    <span>&copy 2016 Jasper Mulder
        <div class="icons">
        <a href="#"><img src="../images/icons/facebook.png"></a>
        <a href="#"><img src="../images/icons/instagram.png"></a>
        <a href="#"><img src="../images/icons/linkedin.png"></a>
        </div>
        </span>
  </div>

</footer>

＆＃13;

感谢您帮助我！

Answer 1

更改您的HTML并将社交图标放在版权范围之前：

<footer>
  <div class="footerwidth">
    <div class="icons">
        <a href="#"><img src="../images/icons/facebook.png"></a>
        <a href="#"><img src="../images/icons/instagram.png"></a>
        <a href="#"><img src="../images/icons/linkedin.png"></a>
    </div>
    <span>&copy 2016 Jasper Mulder</span>
  </div>
</footer>

Answer 2

将.icons div移到<span>之外，并将float: left添加到范围：

＆＃13;

footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  clear: both;
  background-color: #303030;
  color: #868686;
  position: relative;
}
footer span {
  display: table-cell;
  vertical-align: middle;
  height: 50px;
  float: left;
}
.footerwidth {
  width: 80%;
  margin: 0 auto;
}
.icons {
  float: right;
  width: 150px;
}

＆＃13;

<footer>

  <div class="footerwidth">
    <span>&copy 2016 Jasper Mulder</span>
    <div class="icons">
      <a href="#">
        <img src="../images/icons/facebook.png">
      </a>
      <a href="#">
        <img src="../images/icons/instagram.png">
      </a>
      <a href="#">
        <img src="../images/icons/linkedin.png">
      </a>
    </div>
  </div>

</footer>

＆＃13;

我还添加line-height: 50px;作为一点奖励;）

Answer 3

首先，您应该更正标记，因为<div>中不允许<span>。

然后你只需要将版权框浮动到左边，右边的图标和容器上的clear the floats浮动。

对于垂直中心，您可以简单地应用相同数量的顶部和底部填充。

https://jsfiddle.net/pnjL5phb/

footer {
  padding: 20px;
  clear: both;
  background-color: #303030;
  color: #868686;
  overflow: hidden;
}
footer span {
  float: left;
}
.icons {
  float: right;
}

<footer>
  <div class="footerwidth">
    <span>&copy; 2016 Jasper Mulder</span>
    <div class="icons">
      <a href="#"><img src="../images/icons/facebook.png"></a>
      <a href="#"><img src="../images/icons/instagram.png"></a>
      <a href="#"><img src="../images/icons/linkedin.png"></a>
    </div>
  </div>
</footer>

Answer 4

在这里，有很多解决方案。

footer span {
position:relative;
top:15px;
left:-110px;
height: 50px;
}

请勿使用表格进行布局。

http://codepen.io/damianocel/pen/BjdWWq

Answer 5

css应该是：

.footerwidth {
    width: 80%;
    margin: 0px auto;
    PADDING-TOP: 15PX;
}
footer span {
    display: inline-block;
    height: 50px;
}
.icons {
    float: right;
    HEIGHT: 50PX;
    width: 150px;
}

HTML应该是：

<div class="footerwidth">
    <span>© 2016 Jasper Mulder</span>
    <div class="icons">
        <a href="#"><img src="../images/icons/facebook.png"></a>
        <a href="#"><img src="../images/icons/instagram.png"></a>
        <a href="#"><img src="../images/icons/linkedin.png"></a>
    </div>
</div>

演示：https://jsfiddle.net/9n4cav1o/

Answer 6

以下是您问题的jsFiddle。请仔细阅读。 https://jsfiddle.net/dhqp3Ln5/

将我的图标浮动到我的页脚右侧

6 个答案: