html - 在 block 内合并 Div

Question

如果您查看下面我的 Fiddle，我会尝试将社交按钮添加到包含 Logo 的 block 的右侧。我已经到了可以将它们放在同一 block 中的地步，但是，社交按钮出现在 Logo 下方。目前，社交按钮和 Logo 出现在不同的 block 中。说到编码，我仍然有点“不知所措”，所以，如果这是一个简单的解决方法，请原谅我的天真。感谢您的浏览，感谢您抽出宝贵时间。

我的 fiddle :http://jsfiddle.net/Del087/angk8v6z/3/

CSS

div {
background-color: #080808;
display: inline-block;
width: 950px;
padding: 10px;
margin: 5px;
}
#social a:hover {
background-color: transparent;
opacity:0.7;
}
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

HTML

    <div style="display: inline-block;"><a href="http://s1314.photobucket.com/user/RTH13/media/RTH%20Artwork/RTHTextLogo1_zpsfd100146.png.html" target="_blank"><img src="http://i1314.photobucket.com/albums/t563/RTH13/RTH%20Artwork/RTHTextLogo1_zpsfd100146.png" border="0" alt=" photo RTHTextLogo1_zpsfd100146.png"/></a>

</div>
<div id="social" style="display: inline-block;"> <a href=" http://www.twitter.com/realtimehockey1 " target="_blank "><img border="0 " src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/twitter_zpsb3e89d7a.png " style="margin-right:1px; " alt="Follow Us On Twitter " title="Follow Us On Twitter "/></a>

Answer 1

将 social div 放在横幅的 div 中并使其内联显示，我认为它完全符合您的要求。我还建议不要设置所有 div (div{}) 的样式，而是向横幅 div 添加一个类并直接设置该类的样式。最后，不再需要横幅 div 上的 inline-block

fiddle : http://jsfiddle.net/trex005/angk8v6z/5/