html - 奇妙なアライメントの問題

Question

私は HTML と CSS に不慣れで、最初のサイトを構築しています。この非常に奇妙な配置と配置の問題に遭遇し、困惑しました。何が起こっているのかを理解するのを手伝ってくれる人に感謝します。

html と css を codepen にロードしたので、表示できます: http://codepen.io/joe/pen/kJmeK

また、問題のスクリーンショットを撮り、閲覧用にアップロードしました。

何が起こっているのかというと、電話番号と住所の 1 ～ 3 行をpタグで囲むとすぐに、それらが右揃えになり、マップの下に引っかかってしまうように見えます。しかし、開封するとすぐに元の場所に戻り、正常に動作します。

ただし、codepen にロードすると、pタグは正常に動作しているように見えます。

h2タグとタグの両方について、CSS で負のマージンとパディングをいじって、これに対処しようとしましたp。しかし、それは<p>s が正確にどこにあるのかわからず、それらを contact_us フォームに揃えるという問題を引き起こします。

私の CSS でわかるように、pこれまで他の場所でタグを操作したことはありません。

ここで何が欠けていますか？

Answer 1

あなたのコードは、私が知る限りかなり乱雑です。テーブルを使用する場合、この単純なレイアウトの絶対位置を気にする必要はありません。

ほとんどの場合、maps には浮動小数点があり、p には浮動小数点プロパティがなく、マップの後ろに配置されます。これは、float 要素が要素の通常の流れから取り出されるためです。

p {float:left;}

また

p {float:right;}

トリックを行う必要がありますが、それでもコード全体を確認し、テーブルレイアウトを作成するか、レイアウトにテーブルを使用しないcssレイアウトを作成することをお勧めします.

また、浮動要素には width プロパティも設定する必要があることに注意してください。そうしないと、シュリンク ラップが発生します。