对齐 Divs，表格样式，用于社交媒体图标

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 并排放置，只需删除它们的 block 属性即可。

.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;
}

直播 jsfiddle：http://jsfiddle.net/6AA2L/3/