Question

我想在我的页脚上添加一些社交媒体图标，两个列中的每一个都有四个图标很好的空间，但我的代码目前只能将所有图标放在另一个上面，这将是什么解决方案？

的CSS：

.container
{
}
.container DIV
{
    width: 15px;
    margin: 1px;
}

HTML：

<div>
<div style="width: 200px;" class="container" display: "inline-block" >
<div style="float: left;"><a title="Facebook" href="http://www.facebook.com/KenyaLuxuryVillas" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/facebook-logo-square.png" /></a></div>
<div style="float: right;"><a title="Stumbleupon" href= "http://www.stumbleupon.com/stumbler/bestbeacheskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/stumbleupon-logo-square.png" /></a></div>
<div style="float: left;"><a title="Linkedin" href= "http://ke.linkedin.com/in/luxuryvillaskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/linkedin-logo-square2.png" /></a></div>
<div style="float: right;"><a title="Twitter" href= "https://twitter.com/villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/twitter-bird2-square.png" /></a></div>
<div style="float: left;"><a title="Google+" href= "https://plus.google.com/u/0/108558298587711226912/" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/google-logo-square.png" /></a></div>
<div style="float: right;"><a title="Vimeo" href= "https://vimeo.com/africashot" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/vimeo-s.png" /></a></div>
<div style="float: left;"><a title="Skype" href= "callto://villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/skype-s.png" /></a></div>
<div style="float: right;"><a title="YouTube" href= "http://www.youtube.com/user/DianiBeachKenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/youtube.png" /></a></div>
</div>

任何帮助将受到高度赞赏！提前谢谢！

Answer 1

Div是块元素，因此每个div将跨越整行要并排div，只需删除它们的块属性。

.container .container DIV { width: 15px; margin: 1px; display:inline-block; }

Answer 2

尝试类似：

<强> HTML

    <div>

<div style="width: 200px;" class="container" display: "inline-block" >

 <div id="col1" style="float:left">

<div style=""><a title="Facebook" href="http://www.facebook.com/KenyaLuxuryVillas" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/facebook-logo-square.png" /></a></div>

<div style=""><a title="Linkedin" href= "http://ke.linkedin.com/in/luxuryvillaskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/linkedin-logo-square2.png" /></a></div>

<div style=""><a title="Google+" href= "https://plus.google.com/u/0/108558298587711226912/" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/google-logo-square.png" /></a></div>

<div style=""><a title="Skype" href= "callto://villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/skype-s.png" /></a></div>


    </div>


    <div id="col2" style="float:left;"> 
<div style=""><a title="Stumbleupon" href= "http://www.stumbleupon.com/stumbler/bestbeacheskenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/stumbleupon-logo-square.png" /></a></div>   
        <div style=""><a title="Twitter" href= "https://twitter.com/villasdiani" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/twitter-bird2-square.png" /></a></div>

    <div style=""><a title="Vimeo" href= "https://vimeo.com/africashot" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/vimeo-s.png" /></a></div>
    <div style=""><a title="YouTube" href= "http://www.youtube.com/user/DianiBeachKenya" target="_blank"><img src= "http://villasdiani.com/wp-content/uploads/2013/02/youtube.png" /></a></div>
    </div>
</div>

CSS

.container
{
}
.container div
{
    width: auto;
    margin: 1px;
}
.container img
{
    width:30px;
}

Live jsfiddle：http://jsfiddle.net/6AA2L/3/

对齐社交媒体图标的Div，表格样式

2 个答案: