jquery - jquery html() が呼び出されると、インラインブロック div が下に移動します

Question

この jsfiddle をご覧ください: http://jsfiddle.net/NtxG9/1/

同じクラスの 2 つの div があり、インライン ブロックとして表示されます。私が呼び出すと$('#parent1').html('some text');、それは下に移動します。

誰かがなぜこれが起こるのか説明してくれますか?

ありがとう！

編集

これらすべての解決策に感謝しますが、なぜこれが起こるのかはまだ不明です。div のコンテンツを変更すると、その位置に影響するのはなぜですか?

Answer 1

説明：

インラインブロックを表示するために使用できます。つまり、デフォルトinline-blockでは、任意の html 要素で要素を定義baselineすると常に定義されます。vertical-align topdisplay:inline-block

使ってみて

.parent {
    vertical-align:top;
}

デモ

Answer 2

vertical-align: top;すべてを上に揃えるために使用する必要があります。

古いバージョンの IE では、hasLayout をトリガーする必要がある場合があります。

/* For IE 7 */
zoom: 1;
*display: inline;

Answer 3

float:left プロパティを親クラスに追加してみてください。フローティングの問題のように見えます。このプロパティを追加したところ、うまくいきました。

Answer 4

ここを参照 リンク

このCSSを追加

float:left;