初心者が助けを求めています。ページレイアウトの問題です。 _html/css

初心者が助けを求めています。ページレイアウトの問題です。 _html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:09:16

オリジナル

1031 人が閲覧しました

<!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の位置は固定されます。。ヘッダーと新規はブラウザーで移動します。。
学んでください

多くの問題があります。ウィンドウサイズを小さくしてから、ページを更新してください。問題は、親レイヤーに position:re がありません。 .. 絶対に本体が直接配置されていることを意味します、問題がない場合は、

neng jiangjiang ma?

たくさんあります。問題がある場合は、ウィンドウサイズを小さくするテストを行ってから、ページを更新して問題が大きくなることを推定してください。position:Absolute; 親レイヤーには position:re がありません。これは、絶対位置が直接指定されていることを意味します。体に問題がないのは不思議です

正直、どのような効果を望んでいるのかわかりません。あまりにも多くの人が返信してくれたので、最初は自分が理解できなくなっているのではないかと思いました。しかし、どのようなレイアウトを作成したいのか本当にわかりません。それは比較的単純な問題であるべきだと思います。

親は相対位置を設定しません。position:relative; により、後続の絶対位置がボディに対する絶対位置になります。。クリア？

おおおおお
このようにrelativeが使われていることが分かりました

親が相対位置position:relative;を設定していないため、後続の絶対位置はbodyに対する絶対位置になります。。クリア？