對齊Div，表格樣式，用於社交媒體圖標

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/