我該如何總是以每2個街區的新線路開始？

Question

爲什麼在線對齊在Opera上不起作用？這一切都是筆直的。

DEMO：http://jsfiddle.net/KKEKW/

使用Firefox或Safari它看起來很好，就像這樣。這是它看起來我想要的。

使用Opera這將是所有直了，就像這樣。我不想要它。

HTML

<div class ="social"> 
    <div class ="row"> 
     <div class="twitter"> 
      twitter content 
     </div> 
     <div class="facebook"> 
      facebook content 
     </div> 
    </div> 
    <div class ="row"> 
     <div class="google"> 
      google content 
     </div> 
     <div class="instagram"> 
      instagram content 
     </div>   
    </div> 
</div> 

CSS

div.social { 
    margin-top: 10px; 
    display: inline-block; 
    height: 90px; 
    overflow: hidden; 
    text-align: left; 
    vertical-align: bottom; 
} 


div.row{  
} 

div.twitter { 
    float: left; 
    width: 200px; 
    height: 30px; 
    overflow: hidden; 
    display:inline-block; 
} 

div.facebook { 
    float: left; 
    width: 170px; 
    height: 30px; 
    overflow: hidden; 
    display:inline-block; 
} 

div.google { 
    float: left; 
    width: 200px; 
    height: 25px; 
    overflow:hidden; 
    display:inline-block; 
} 

div.instrgram { 
    float: left; 
    width: 170px; 
    height: 30px; 
    overflow: hidden; 
    display:inline-block; 
} 

我需要的輸出

twitter content ewfe(20px margin)facebook conten adhfhefjw 
google content ewffewfewfewfew(20px margin)instagram content dwqwqqwfqwe 

Answer 1

一個樣式化，無序的列表可以爲你做到這一點。

給你的LI固定寬度，給你的UL兩倍。在您的LI上使用float:left。

<div class ="social"> 
<ul> 
    <li>twitter content</li> 
    <li>facebook content</li> 
    <li>google content</li> 
    <li>instagram content</li> 
</ul> 
</div> 

CSS：

social ul, social li { 
    margin:0; 
    padding:0; 
    list-style:none;  
} 

.social ul { 
    width:500px; 
} 

.social li { 
    width:250px; 
    float:left; 
}