ホームページ > 記事 > ウェブフロントエンド > 初心者が助けを求めています。ページ レイアウトの問題です。 _html/css_WEB-ITnose
初心者が助けを求めています。ページ レイアウトの問題です。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:09:161010ブラウズ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #divBody { width: 1024px; margin: 0 auto; } #container { margin: 0 auto; width: 950px;} #header { width: 950px; height:300px; margin: 0 auto; background-color: #aaaaaa; margin-bottom: 10px; border-bottom: 3px solid; } #new {width: 205px; height: 739px; background-color: green; top:400px; left: 100px; margin-right: 10px; } #recommend {width: 735px; height: 200px; position: absolute; top:325px; left: 570px; background-color: yellow; } #all { width: 735px; height: 500px; background-color: blue; position: absolute; left: 570px; top:550px; } </style></head><body><div id="divBody"><div id="header">header</div><div id="container"><div id="new">new</div><div id="recommend">recommend</div><div id="all">all</div></div></div></body></html>
ディスカッションに返信 (解決策)
このコード、
ドラッグするとページがめちゃくちゃになります、
推奨事項とすべての部分。 。 。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #divBody { width: 1024px; margin: 0 auto; } #container { margin: 0 auto; width: 950px;} #header { width: 950px; height:300px; margin: 0 auto; background-color: #aaaaaa; margin-bottom: 10px; border-bottom: 3px solid; } #new {width: 205px; height: 739px; background-color: green; top:400px; left: 100px; margin-right: 10px; } #recommend {width: 735px; height: 200px; position: absolute; top:325px; left: 310px; background-color: yellow; } #all { width: 735px; height: 500px; background-color: blue; position: absolute; left: 310px; top:550px; } </style></head><body><div id="divBody"><div id="header">header</div><div id="container"><div id="new">new</div><div id="recommend">recommend</div><div id="all">all</div></div></div></body></html> すべてお勧めします
左を調整するだけです。
左上の絶対位置が適切に調整されていません
2階、22インチモニターのコードにはie9ブラウザを使用しました
全画面表示後、おすすめ、すべて、新規が重なります。 。
このフォーラムに写真をアップロードできないと言いますか? ? ? ? ? ? ?
3つのdivすべてにfloat:leftを設定したところ、問題は解決されました
Position:absoluteを使用すると、右側の2つのdivの位置が固定されます。 。ヘッダーと新規はブラウザーで移動します。 。
div が修正できる限り、float 属性を追加するのが最善です
3 つの div すべてに float:left を設定したところ、問題は解決されました
Position:absolute を使用する場合、右側の 2 つは各divの位置は固定されます。 。ヘッダーと新規はブラウザーで移動します。 。
学んでください
neng jiangjiang ma?
たくさんあります。問題がある場合は、ウィンドウ サイズを小さくするテストを行ってから、ページを更新して問題が大きくなることを推定してください。position:Absolute; 親レイヤーには position:re がありません。これは、絶対位置が直接指定されていることを意味します。体に問題がないのは不思議です
正直、どのような効果を望んでいるのかわかりません。あまりにも多くの人が返信してくれたので、最初は自分が理解できなくなっているのではないかと思いました。しかし、どのようなレイアウトを作成したいのか本当にわかりません。それは比較的単純な問題であるべきだと思います。
おおおおお
このようにrelativeが使われていることが分かりました
親が相対位置position:relative;を設定していないため、後続の絶対位置はbodyに対する絶対位置になります。 。クリア？