なぜこれらのdivが重複していますか？私が欲しいもの

Question

は単純です：

[著作権Vimeoの|フェイスブック| Twitterの共有]

しかし、私のdivをオーバーラップ。または彼らはフッターの外に出ます。あるいは、彼らは私の脳を別の方法で傷つける。また、私は、私が望む簡単なもののために多くのCSSを得る方法があるように感じる。これはどうやってクリーンな問題でできますか？

<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はいくつかの問題があります。

1. position:absoluteを使用して、フロートは効果がありません。
2. 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を作成する必要はありません。それは問題を解決するかもしれない。また

あなたがその類似し

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

Theresはその後、それらを使用する必要がリンクを作成しないようにしたい場合だけではなく、

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

を使用し、各VIMEO、FACEBOOK、TWITTERの周りのdivを使用する必要はありません非常に多くのdiv