我试图将两个元素并排放置而不是堆叠。我确信这是一个相当简单的修复,但是,对于编码新手,我似乎无法弄明白。其次,如果您注意到社交图标,我似乎无法弄清楚为什么“Twitter”图标不会确认该链接。其他3个但是,Twitter不会。顺便说一句,我的内容区域是950px宽,我希望这能跨越整个区域。任何帮助将不胜感激。谢谢你的时间。
我的小提琴: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>
答案 0 :(得分:1)
<div>
默认情况下为display: block;
,并且在对象后面有一个硬回车。如果您希望彼此旁边有多个<div>
,则可以将display
属性设置为inline-block
。这意味着<div>
可以放在彼此旁边。