浮動物品垂直對齊

Question

我不知道為什么，但我的浮動圖像div class="social">...</div>停止正常工作。 我的目標：垂直對齊圖像，就像一列。

檢查設計，更容易理解： 設計預覽

它們位於窗口/瀏覽器屏幕的右側，具有:hover效果，但現在無效。

代碼有什么問題？

繼承我的JSfiddle

HTML

<div id="home">

        <div id="nav">
            <div class="container clearfix">
                    <ul id="menu">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#services">Serviços</a></li>
                        <li><a href="#team">Equipa</a></li>
                        <a href="#" id="logo" alt="Style Euclides"><img src="http://styleeuclides.site50.net/img/logo.png" alt="Logo Style Euclides" width="90px" height="40px"></a> 
                        <li><a href="#space">Espaço</a></li>
                        <li><a href="#gallery">Galeria</a></li>
                        <li><a href="#contact">Contatos</a></li>
                    </ul>
            </div>
        </div>

                <div class="social">
                    <a href="http://www.facebook.com" target="_blank"><img src="http://styleeuclides.site50.net/img/fb.png" alt="facebook"></a>
                    <a href="http://www.instagram.com" target="_blank"><img src="http://styleeuclides.site50.net/img/ins.png" alt="instagram"></a>
                    <a href="http://www.twitter.com" target="_blank"><img src="http://styleeuclides.site50.net/img/twi.png" alt="twitter"></a>          
                        </div></div>

CSS

#home .social{ /* SOCIAL ICONS */
    display: inline-block;
    position: fixed;
    z-index: 1;
}

#home .social a{
    float: right;
    padding: 1px;
    opacity: 0.7;
    margin-right: auto;
    margin-left: auto;
}

#home .social a:hover{
    opacity: 1.0;
}

#home .social img{
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0; 
    margin-top: 2px;
    margin-top: 150px;
}

Answer 1

我已經更新了你的小提琴，以反映我的想法。

http://jsfiddle.net/aq3T7/1/

#home .social{ /* SOCIAL ICONS */
float: right;
display: inline-block;
position: fixed;
z-index: 99;
right: 0;
top:150px;
}

#home .social a{
clear:both;
display:block;
padding: 1px;
opacity: 0.7;
margin-right: auto;
margin-left: auto;
}

#home .social a:hover{
opacity: 1.0;
}

#home .social img{
margin-top: 2px;
}

此外，我還刪除了一些元素上不必要的邊距。 但基本上，你的A標簽是內聯元素，它們會自然地顯示在一起。 如果你將它們作為塊元素，它們將占用它們自己的水平行（最多為其父級的寬度）。 這是CSS最重要和最基本的概念。

Answer 2

更新了你的小提琴 ： - 添加頂部：150px; 和寬度：40px; 對社會div，並重新審視邊緣 - 圖像的頂部。

#home .social{ /* SOCIAL ICONS */
float: right;
display: inline-block;
position: fixed;
z-index: 99;
right: 0;
width:40px;
top:150px;
}

#home .social a{
padding: 1px;
opacity: 0.7;
margin-right: auto;
margin-left: auto;
}

#home .social a:hover{
opacity: 1.0;
}

#home .social img{
}

Answer 3

嘗試這個：

   #home .social{ /* SOCIAL ICONS */
        position: absolute;
        z-index: 1;
        right: 0;
    }

    #home .social a{
        float: right;
        padding: 1px;
        opacity: 0.7;
        margin-right: auto;
        margin-left: auto;
    }

    #home .social a:hover{
        opacity: 1.0;
    }

    #home .social img{

    }

Answer 4

在這里，你去交配，為你排序。 http://jsfiddle.net/aq3T7/

#home .social{ /* SOCIAL ICONS */
    position: fixed;
    top: 110px;
    right: 10px;
    z-index: 1;
}

#home .social a{
    opacity: 0.7;
}

#home .social a:hover{
    opacity: 1.0;
}

#home .social img{
    float: right;
    clear: right;
    margin-top: 5px;
}