如何把图像放在一起 [英] How to put an image next to each other

问题描述

我想把这两个超链接的图标放在一起，但我似乎不能这样做。如您所见，twitter图标落在下一行..（它们都被超链接到各自的网站）

HTML

 < div class =nav3style =height：705px;> 
< div id =icons>< a href =http://www.facebook.com/>< img src =images / Facebook.png> a> 
< / div> 
< div id =icons>< a href =https://twitter.com>< img src =images / twitter.png>< / a> 
< / div> 
< / div> 
  

CSS

  .nav3 {
 background-color：＃E9E8C7; 
 height：auto; 
 width：150px; 
 float：left; 
 padding-left：20px; 
 font-family：Arial，Helvetica，sans-serif; 
 font-size：12px; 
 color：＃333333; 
 padding-top：20px; 
 padding-right：20px; 
} 
 
 #icons {position：relative; 
 width：64px; 
 height：64px; 
} 
 
 #icons a：hover {
 background：＃C93; 
 display：block; 
 
} 
  

如何使对齐？ / p>

提前感谢

解决方案

您不需要div。

HTML：

 < div class =nav3style =height：705px;> 
< a href =http://www.facebook.com/class =icons>< img src =images / Facebook.png>< / a> 
< a href =https://twitter.comclass =icons>< img src =images / twitter.png>< / a> 
< / div> 
  

CSS：

 code> .nav3 {
 background-color：＃E9E8C7; 
 height：auto; 
 width：150px; 
 float：left; 
 padding-left：20px; 
 font-family：Arial，Helvetica，sans-serif; 
 font-size：12px; 
 color：＃333333; 
 padding-top：20px; 
 padding-right：20px; 
} 
 
 .icons {
 display：inline-block; 
 width：64px; 
 height：64px; 
} 
 
 a.icons：hover {
 background：＃C93; 
} 
  

查看这个小提琴

I'm trying to put these two 'hyperlinked' icons next to each other but I can't seem to do that. As you can see, the twitter icon falls to the next line.. (they are both hyperlinked to their respective website)

HTML

<div class="nav3" style="height:705px;">
    <div id="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a>
    </div>
    <div id="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a>
    </div>
</div>

CSS

.nav3 {
    background-color: #E9E8C7;
    height: auto;
    width: 150px;
    float: left;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 20px;
    padding-right: 20px;
}

#icons{position:relative; 
    width: 64px; 
    height: 64px; 
   }

    #icons a:hover {
     background: #C93;
        display: block;

 }

How do I make the aligned next to each other?

Thanks in advance

解决方案

You don't need the div's.

HTML:

<div class="nav3" style="height:705px;">
    <a href="http://www.facebook.com/" class="icons"><img src="images/facebook.png"></a>
    <a href="https://twitter.com" class="icons"><img src="images/twitter.png"></a>
</div>

CSS:

.nav3 {
    background-color: #E9E8C7;
    height: auto;
    width: 150px;
    float: left;
    padding-left: 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333333;
    padding-top: 20px;
    padding-right: 20px;
}

.icons{
    display:inline-block;
    width: 64px; 
    height: 64px; 
   }

 a.icons:hover {
     background: #C93;
 }

See this fiddle

这篇关于如何把图像放在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！