1

Opera でインライン配置が機能しないのはなぜですか?

デモ: 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;
}
4

2 に答える 2

2

float:leftとdisplay:inline-block矛盾しています。要素をフロートさせると、displayプロパティは無関係になります。

したがって、要素からfloatまたはを削除します。display両方を同時に使用しようとしないでください。期待どおりに機能しません。

とにかく、、、などの要素ではなく、display:inline-blockonを指定することで、目的を達成できるように見えます。.row.twitter.facebook

于 2013-02-01T12:26:36.723 に答える
0

これがあなたが望むものかどうかはわかりませんが、私にとってはうまくいきました（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 リンク.

于 2013-02-01T12:15:18.293 に答える