あなたはウェブサイトを持っていますが、divボックスは正しく並んでいません。 これはいくつかの理由で起こる可能性があります。特に、あるWebサイトから別のWebサイトへのdivのポジションの問題を考えるときにはそうです。 同様に、ボックス要素は、位置決めエラーからオーバーフロー問題や単純なフロート問題に至るまで、いくつかの理由でオーバーラップすることがあります。 ほとんどの場合、Webサイトのスタイルシートをすばやく簡単に変更すれば問題は解決します。

1。

ボックスに現在余白がなく、少しだけ重なっている場合は、余白を追加します。 他のbox要素を押しのけるためにmargin要素を使いたいだけなら、左のような片側だけに余白を設定できます。 たとえば、div Aとdiv Bが隣同士に配置され、div Bが左側で重なっている場合は、次のようにdiv Aに左側の余白を追加するようにスタイルシートを変更できます。

a {幅：100ピクセル; 左余白：10px。 }

2。

スタイルシートを検索して、重なりが発生する可能性がある位置の値を探し、それらを変更します。 Webサイトのdiv要素を配置するために絶対配置を使用している場合、それはすべて無料です - どの要素もページ上の他の要素と重なることがあります。 そのため、div Aを幅100ピクセル、ページの左上から15ピクセルに設定した場合、div Aと重ならないようにdiv Bを左に115ピクセル以上配置する必要があります。上または下、そして右または左から。

3。

特定の幅を持つdivを設定し、オーバーフローを隠します。 これはdivが指定されたサイズを超えないようにして、いわゆるコンテンツがこぼれるのを防ぎます。 たとえば、div Aに幅が設定されておらず、その中に大きな画像を配置した場合、divはその画像に合わせて自動的に拡大されます。 幅を設定しても、画像はdivの端を超えて表示されますが、divは拡大されません。 オーバーフローを非表示にした場合、画像はdivの境界内にのみ表示され、要素は拡大されません。 たとえば、div Aを200ピクセル幅に設定し、オーバーフローしないようにするには、次のスタイルコードを使用します。

a {幅：200ピクセル; オーバーフロー：隠れています。 }

4。

divボックスを自動的に並べて表示するには、 "float"オプションを使用してください。 たとえば、div Aをサイドバーとして機能させ、div Bをコンテンツとして保持する必要があります。両方のdivを左にフロートさせて水平方向に整列させることができます。 浮動div要素は重なりません。 2つの浮遊要素の例は次のようになります。

a {幅：150ピクセル; フロート：左。 }

b {幅：400ピクセル。 フロート：左。 }

ヒント

• Firefoxを使用している場合は、ボックスを右クリックして[Inspect Element]を選択できます。 これにより、各要素の概要がわかりやすくなり、特に難しい問題を特定するのに役立ちます。
• 「overflow-x」または「overflow-y」を使用して、x軸またはy軸でのみ非表示にするようにオーバーフローを設定できます。