Question

如果你看下面我的小提琴，我试图将社交按钮添加到包含徽标的块的右侧。我已经到了可以将它们放在同一个区块中的点，但是，社交按钮出现在徽标下方。就目前而言，社交按钮和徽标出现在单独的块中。我仍然有点＆＃34;湿透了耳朵＆＃34;当谈到编码时，请原谅我的天真，如果这是一个简单的解决方案。谢谢你看看，我感谢你的时间。

我的小提琴：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

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

小提琴： http://jsfiddle.net/trex005/angk8v6z/5/

Answer 2

只需将另一个div放在父级中，并将div css更新为仅应用于父级。

        <div class="parent" 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 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>

<a href="http://www.facebook.com/realtimehockey " target="_blank "><img border="0 " src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/facebook-square_zpsebe7308f.png " style="margin-right:1px; " alt="Like Us On Facebook " title="Like Us On Facebook "/></a>

<a href="http://www.instagram.com/realtimehockey " target="_blank "><img style="margin-right:1px; " src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/instagram_zps74a97e79.png " alt="Follow Us On Instagram " title="Follow Us On Instagram "/></a>

<a href="Contact Us " target="_blank "><img style="margin-right:1px; " src="http://i1314.photobucket.com/albums/t563/RTH13/Website%20Art/email_zps98fe1c68.png " alt="Contact Us " title="Contact Us "/></a>
    </div>
    </div>

CSS -

div.parent {
    background-color: #080808;
    display: inline-block;
    width: 950px;
    padding: 10px;
    margin: 5px;
}
#social{
 float: right;   
}    
#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);
}

查看小提琴 - http://jsfiddle.net/angk8v6z/4/

Answer 3

这真的很糟糕。以下内容适用于所有<div>

div {
background-color: #080808;
display: inline-block;
width: 950px;
padding: 10px;
margin: 5px;
}

然后，如果您有CSS样式，则不应使用行样式

<div style="display: inline-block;">

我真的不想再看了。需要先获得基本的东西。

在区块内合并Div

3 个答案: