为什么内联对齐不适用于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

float:left和display:inline-block相互矛盾。如果浮动元素，则会使display属性无关紧要。

因此，请从元素中删除float或display。不要试图同时使用它们;它不会按照你期望的方式运作。

无论如何，通过在display:inline-block上指定.row而不是.twitter，.facebook等元素，我觉得您可以达到想要的效果。< / p>

Answer 2

不确定这是否是您想要的，但它对我有用（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