Html 垂直对齐的浮动项目

我不知道为什么，但我的浮动图像停止正常工作。我的目标是：垂直对齐图像，就像一列一样

检查设计，更容易理解：

它们位于窗口/浏览器屏幕的右侧，具有

：hover

效果，但现在不起作用

代码有什么问题

这是我的

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>

试试这个：

   #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{

    }

---

我更新了你的小提琴，以反映我认为你想要的东西

此外，我还删除了一些元素上不必要的边距。 但基本上，A标记是内联元素，它们会自然地显示在一起。 如果使它们成为块元素，它们将占据自己的水平行（最大宽度为其父元素的宽度）。这是CSS最重要和最基本的概念。

更新了您的： -增加顶部：150px；宽度：40px；到social 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{
}

---

给你，伙计，把一切都安排好。

---

想解释一下什么东西不起作用，以及您在哪个浏览器中试用过吗？我用最新的chrome浏览器检查了你的小提琴，它似乎工作得很好……是的，看起来工作得很好。我在悬停时得到了不透明度的改变。图像不在“列”中，这是我的目标。以前是这样，它在所有浏览器中都能工作，但我不知道我做了什么。。。检查下面的设计，你会更好地理解它。设计预览：这很有效，但是Karim AG的例子工作得更好。现在它像以前一样工作（可能更好！）。非常感谢m8，你能解释一下我的错误吗，我是HTML/CSS新手，所以我想了解更多你的图片只显示在一行上，因为div的宽度正好适合他们。。所以我给它加了一个宽度。。你给了图片一个页边空白，这样每个图片都会有一个页边空白，这是灾难性的。。因此，我将页边空白顶部添加到包含的div“.social”中。

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

#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{
}

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