爲什麼在線對齊在Opera上不起作用？

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

Answer 1

不知道這是否是你想要的，但它的工作對我來說（以較少的CSS/HTML太）：

HTML：

<section class="left"> 
    <div>Twitter</div> 
    <div>Google</div> 
</section> 

<section class="right"> 
    <div>Facebook</div> 
    <div>Instagram</div> 
</section> 

CSS：

div { 
    display: block; 
    padding: 5px; 
} 

.left { 
    float: left; 
} 

.right { 
    float: left; 
} 

jsfiddle link。

Answer 2

float:left和display:inline-block相互矛盾。如果浮動一個元素，它會使display屬性不相關。

因此，從元素中刪除float或display。不要試圖一次使用它們;它不會像你期望的那樣工作。

總之，在我看來，如果你能達到你想要通過指定.row的display:inline-block而非.twitter，.facebook等元素的東西。