Html 如何将图像并排放置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16260485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put an image next to each other
提问by user2320517
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
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
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
提前致谢
回答by jao
You don't need the div's.
你不需要div。
HTML:
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:
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
看到这个小提琴
回答by Optimus Prime
Change div to span. And space the icons using HTML
将 div 更改为跨度。并使用 HTML分隔图标
<div class="nav3" style="height:705px;">
<span class="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a>
</span>
<span class="icons"><a href="https://twitter.com"><img src="images/twitter.png"></a>
</span>
</div>
CSS
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;
}
span does not break line, div does.
span 不会断线，div 会断线。
回答by Teffi
Check this out. Just use float and get rid of relative.
看一下这个。只需使用浮动并摆脱相对。
#icons{float:left;}
回答by xjjjx
try putting both images next to each other. Like this:
尝试将两个图像并排放置。像这样：
<div id="icons"><a href="http://www.facebook.com/"><img src="images/facebook.png"></a><a href="https://twitter.com"><img src="images/twitter.png"></a>
</div>
回答by Max
Instead of using position:relativein #icons, you could just take that away and maybe add a z-index or something so the picture won't get covered up. Hope this helps.
而不是使用position:relativein #icons，你可以把它拿走，也许添加一个 z-index 或其他东西，这样图片就不会被掩盖了。希望这可以帮助。
