html - 并排对齐两个div

Question

我试图将两个元素并排放置，而不是堆叠放置。我确信这是一个相当简单的修复，但是作为编码的新手，我似乎无法弄清楚。其次，如果你注意到社交图标，我似乎无法弄清楚为什么“Twitter”图标不承认链接。其他 3 个会，但 Twitter 不会。顺便说一句，我的内容区域是 950px 宽，我希望它能跨越整个区域。任何帮助将不胜感激。感谢您的宝贵时间。

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

CSS

div {
background-color: #080808;
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><div><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>

Answer 1

<div>我们有display: block;默认情况下，它们在对象之后有一个硬返回。如果你想要多个 <div>如果彼此相邻，您可以设置 display属性(property)inline-block .这意味着 <div> s 可以并排放置。