html - 2 div 50% インライン ブロックが隣り合っていない

Question

このボックス モデルに問題があります。Blackberry 4.6 でのみ問題が発生していましたが、jsbin/jsfiddle でも発生しています。これらの 2 つの div は 50% である必要があるため、互いに隣接していますが、最後の 1 つが壊れています。

jsbin: http://jsbin.com/oyujof/1/edit

前もって感謝します。

Answer 1

インラインおよびインラインブロック要素に関しては、空白は重要です。div 間の空白を削除またはコメントアウトします。

明確化: 空白は改行文字であり、div 間のスペースは次のとおりです。

  </div>\n
  __<div class="nav-button">

インラインまたはインライン ブロックを使用すると、これらは 1 つのスペースとしてレンダリングされます。

Answer 2

空白には幅があるため、合計レイアウトは 50% + space_width + 50%、> 100% となり、2 番目の div が壊れます。空白を削除するか、幅を 49% に設定してください。

Answer 3

独自の問題が発生する可能性がありますが、このfloat場合にフロートを使用するのは簡単で、空白や 49% をクリーンアップすることができない場合に唯一のオプションになる可能性があります。

.nav-button {
  float: left;
  display: block;
  width: 50%;
}

更新された jsbin: http://jsbin.com/oyujof/23/

Answer 4

ルールを指定するだけで.nav-toなく、.nav-button左にフロートすることもできます。あなたが与えたHTMLでそれを修正するCSSは次のとおりです。

.nav-to {
        width: 50%;
        float:left;
    .nav-button {
        width: 50%;
        float:left;

        &:last-child {
            text-align: right;
        }
    }
}

http://jsbin.com/oyujof/32/edit

Answer 5

これは最良の答えではないかもしれませんが、それぞれを 50% ではなく 49% に設定するとうまくいきます。