Question

我想要的很简单：

[copyright vimeo | facebook | twitter分享]

但是我的div重叠了。或者他们走出页脚。或者他们以另一种方式伤害了我的大脑。此外，我觉得我有很多方法可以解决我想要的简单事情。怎么能在清洁的事情上做到这一点？

<div class="footer">

    <div class="copyright">
        <p>© 2016 css hurts my brain</p>
    </div>

    <div class="social-media">
        <div>Vimeo</div>
        <div>Facebook</div>
        <div>Twitter</div>
    </div>

    <div class="share-menu-button">
        SHARE
    </div>

</div>


.footer {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 20;
}

.footer .copyright {
    position: absolute;
    bottom: 0;
    float: left;
}

.footer .social-media {
    position: absolute;
    bottom: 0;
    float: left;
}

.footer .share-menu-button {
    position: absolute;
    bottom: 0;
    float: left;
}

.social-media div {
    float:left;
}

Answer 1

你的CSS有几个问题：

使用position:absolute时，浮动无效。
使用position:absolute时，所有绝对定位元素都会堆叠（除非您给它们不同的位置）

只使用没有位置的浮动：

 .footer {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: 0;
    z-index: 20;
    background: #000;
    color: white;
}

.footer >div , .social-media > div{
  padding: 16px 20px;
}

.footer .copyright {
    float: left;
}

.footer .social-media {
    float: left;
}

.footer .share-menu-button {
    float: left;
    margin-top: 16px;
}

.social-media div {
    float:left;
}

小提琴：https://jsfiddle.net/kg6v5vjk/1/

Answer 2

为什么不使用，不需要为html中给出的标准格式化过程创建div。这可能会解决问题。

也不需要在每个VIMEO，FACEBOOK，TWITTER周围使用div，而只需使用

<p> Vimeo, Facebook, Twitter </p>

如果你想让他们链接，那么类似的

<p>
<a href="vimeo.com">Vimeo</a>
<a href="facebook.com">Facebook</a>`enter code here`
<a href="twitter.com">Vimeo</a>
</p>

Theres无需使用这么多Divs

为什么这些div重叠？

2 个答案: