垂直对齐的浮动项目答案

【问题标题】：Floated items with vertical alignment垂直对齐的浮动项目
【发布时间】：2014-04-24 07:38:42
【问题描述】：

我不知道为什么，但我的浮动图像 div class="social">...</div> 停止正常工作。我的目标：像列一样垂直对齐图像。

检查设计，更容易理解：design preview

它们位于窗口/浏览器屏幕的右侧，具有: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>

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

【问题讨论】：

想解释一下究竟是什么不工作以及您在什么浏览器中尝试过？我用最新的 chrome 检查了你的小提琴，它似乎工作正常......
是的，看起来工作正常。悬停时我的不透明度发生了变化。
图像不在“列”中，这是我的目标。他们以前，它在所有浏览器中都可以工作，但我不知道我做了什么......检查下面的设计，你会更好地理解它设计预览：gamemedia.deviantart.com/art/Barber-Shop-PREVIEW-439641025

标签： html css css-float alignment vertical-alignment

【解决方案1】：

试试这个：

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

    }

【讨论】：

【解决方案2】：

我已经更新了你的小提琴以反映我认为你想要的。

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 最重要和最基本的概念。

【讨论】：

这行得通，但 Karim AG 的例子效果更好。

【解决方案3】：

更新了您的 fiddle： - 添加顶部：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{
}

【讨论】：

现在它像以前一样工作了（可能更好！）。非常感谢 m8，你能解释一下我做错了什么吗，我是 HTML/CSS 新手，所以我想了解更多
您的图像显示在一行上只是因为 div 的宽度正好适合它们.. 所以我给它添加了一个宽度.. 并且您为图像提供了 margin-top 以便每个图像都有一个灾难性的边缘顶部..所以我将边缘顶部添加到包含 div '.social'。

【解决方案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;
}

【讨论】：