0

アドレスとimgの2つの要素を持つ単純なページがあります。アドレス要素の表示をインラインに変更し、2つの要素が垂直方向に整列することを期待しました。どちらもインライン要素です。

これは真実ではありません。注意してください-http://jsfiddle.net/mark69_fnd/Q8ygG/19/

なにが問題ですか？

ありがとう。

編集1

アドレスとロゴを水平方向に揃えたい、つまり同じ水平方向のレベルにしたい：

+-------+  +----+
|ADDRESS|  |LOGO|
+-------+  +----+

EDIT2

私はみんなを混乱させたと思います。要素を同じ線上に配置したいのですが、これはおそらく水平ではなく垂直方向の配置を意味します。質問の文言を修正しました。ごめん。

EDIT3

重要な追加。ウィンドウのサイズを変更するとき、ロゴがアドレスの下に浮かぶのではなく、アドレスとロゴが相対的な位置を保持するようにします。必要に応じて、スクロールバーが表示されます。

4

3 に答える 3

2

私はあなたのフィドルを更新しました：http://jsfiddle.net/Q8ygG/4/あなたが求めているのはあなただと思いますか？...

私は、インラインまたはインライン ブロックを使用することはあまり好きではありません。それらを古いバージョンの IE で動作させたい場合は、非常に苦労します。私はフロートで作業することを好みます。フロートははるかに予測可能で、クロスブラウザーで動作します。

編集：

あなたの編集を見たところです。もちろん、私のフィドルでimgとアドレスの順序を変更して、目的を達成する必要がありますが、それはおそらく明らかです...

于 2012-08-19T14:16:27.323 に答える
1

私は常にこれをスタイルシートに含めます：

img{border:0;vertical-align:bottom}

これにより、ほとんどの場合、適切な位置合わせが保証されます。問題が発生する可能性があるのは、画像が行の高さよりも短い場合のみです。

于 2012-08-19T21:44:15.557 に答える
0

両方の要素の表示を次のように変更しますinline-block。

#own_address {
    outline: green solid 1px;
    display: inline-block;
}

#logo {
    outline: green solid 1px;
    display: inline-block;
}
于 2012-08-19T14:08:13.377 に答える