【CSS】div配置とWebページレイアウトについて_html/css_WEB-ITnose

div レイアウトを徹底的に学ぶ必要がある理由は、テーブル レイアウトが非常に恥ずかしいためです。両方が同じテーブル内にある場合、

各行の仕様の配分をまったく調整できません。

たとえば。 、次の段落 非常に単純なコード:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title>

11111111111111	11111111111111	11111111111111	11111111111111
11111111111111	11111111111111	11111111111111	11111111111111

はもともと次のようなレイアウトを書きたかった:

しかし、実際の効果は次のようになります:

テーブルの最初の行だけであるため、これは正常です。レイアウトは td 設定が有効になり、残りの行の td 設定は 1 行目の td 設定によって上書きされます。

この問題は、特に Web デザイナーにとって非常に深刻です。テーブルの境界線属性を 0 に設定すると、何が起こったのかを理解するのが難しくなります。

この問題を解決するには、テーブル レイアウトを引き続き使用する場合、2 つの行を同じテーブルに含めないようにする方法と、テーブルのネストを使用する方法があります。

でも、レイアウトするたびに新しいテーブルを使わないといけないのは大変ですよね？そして、スクリプトはどのようにしてこれほど多くのテーブルに番号を付けるのでしょうか?どのように制御すればよいでしょうか？

したがって、テーブルの Web ページ レイアウトはあまり役に立たず、インライン レイアウトでのみ使用できます。インライン レイアウトにおけるテーブルの役割は、div の方がはるかに強力です。

ただし、div レイアウトでもインライン レイアウトを完了できますが、スタイルで float 属性を定義し、インライン レイアウトを完了する必要があります。行を折り返すにはスタイルで clear:both を使用します。

上記のレイヤー配置は次のコードによって実現されます:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>div</title><!--默认情况下的div对齐--><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div><!--更换对齐方式，必须使用clear:both换行，这个换行符的高度为10px，默认为0px，颜色同网页的背景色--><div style="clear:both; height:10px;"></div><!--使用了行内右对齐的方式，是先写最右图层，再写次右图层，与常人思维相反--><div style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></div><div style="background:#00f; width:10%; height:100px; float:right;"></div><div style="clear:both; height:10px;"></div><!--使用行内左对齐方式--><div style="background:#0f0; width:10%; height:100px; float:left;"></div><div style="background:#F00; width:10%; height:100px; float:left;"></div><div style="clear:both; height:10px;"></div><div style="background:#00f; width:10%; height:100px; float:left;"></div><!--如果你更换对齐方式，这里是希望从行内左对齐更变成一个无论大小的图层占用一行，而不用clear:both换行的话，这两个图层会叠放在一起，出错--><div style="background:#0af; width:15%; height:100px;"></div><!--此乃正确的使用方式。--><div style="clear:both; height:10px;"></div><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div>

ページの先頭または末尾に固定されているナビゲーション バーなどの一部のレイヤーや、システムから解放されている一部の広告レイヤーの場合は、位置を使用する必要があります。前者は固定、後者は絶対的な位置合わせ方法です。

上記のコードに、引き続き次のコードを追加します:

<div style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</div><div style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</div><!--下面两个图层，只是为了说明上面两行代码可以放在任何位置，但不影响网页布局之用--><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div>

には次の効果があります:

position:fixed のレイヤーは、スクロール バーが引かれても常にヘッドがぶら下がった状態になります。 :

「ナビゲーション バー」レイヤーと「広告」レイヤーの上記 2 行のコードは、ネットワーク レイアウトに影響を与えることなく、どこにでも配置できます。その後、Web ページのすべてのコードは次のように展開されます。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>div</title><!--默认情况下的div对齐--><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div><!--更换对齐方式，必须使用clear:both换行，这个换行符的高度为10px，默认为0px，颜色同网页的背景色--><div style="clear:both; height:10px;"></div><!--使用了行内右对齐的方式，是先写最右图层，再写次右图层，与常人思维相反--><div style="background:#F00; width:10%; height:100px; float:right; margin-right:10%"></div><div style="background:#00f; width:10%; height:100px; float:right;"></div><div style="clear:both; height:10px;"></div><!--使用行内左对齐方式--><div style="background:#0f0; width:10%; height:100px; float:left;"></div><div style="background:#F00; width:10%; height:100px; float:left;"></div><div style="clear:both; height:10px;"></div><div style="background:#00f; width:10%; height:100px; float:left;"></div><!--如果你更换对齐方式，这里是希望从行内左对齐更变成一个无论大小的图层占用一行，而不用clear:both换行的话，这两个图层会叠放在一起，出错--><div style="background:#0af; width:15%; height:100px;"></div><!--此乃正确的使用方式。--><div style="clear:both; height:10px;"></div><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div><div style="background:#eee; width:15%; height:100px; position:absolute; top:5%; left:80%;">游离于体系之外</div><div style="background:#aaa; width:100%; height:30px; position:fixed; top:0%;left:0%">游离于体系之外</div><!--下面两个图层，只是为了说明上面两行代码可以放在任何位置，但不影响网页布局之用--><div style="background:#aa0; width:15%; height:100px;"></div><div style="background:#0a0; width:15%; height:100px;"></div>

つまり、div レイアウトは、table レイアウトよりもはるかに強力で、制御可能で、使いやすいものになります。