CSSでDIVを水平に並べる方法

ビデオ: 超！初心者のためのCSS講座　要素の中央配置【 text-align・margin 】

コンテンツ

説明書
divタグの絶対位置を定義します
box1 {左余白：100ピクセル; }
box2 {マージン左：400px; }
box3 {マージン左：700px; }
DIV要素を浮かせる
どうやって
お知らせ
必要なもの

HTMLの "div"タグはWebページのレイアウトを定義します。カスケードスタイルシートは、ページ内のHTMLタグをスタイルするために使用されます。 "id"および "class"プロパティは、特定のスタイルを適用するためにCSSで使用されています。複数の "div"タグに共通のスタイルは "class"で定義できますが、このプロパティは1回しか使用できないため、固有のスタイルは特定の "div"タグの "id"プロパティで定義する必要があります。水平方向に整列するスタイルが適用されていない限り、隣接するdiv要素は前の "div"要素の下に表示されます。

説明書

HTMLの "div"タグにより、ページレイアウトにテーブルを使用する必要がなくなります。 （コムストック/コムストック/ゲッティイメージズ）

divタグの絶対位置を定義します

HTMLページまたは関連付けられているCSSファイルを、HTMLまたはメモ帳などの基本的なテキストエディタから2つの異なるウィンドウで開きます。
整列されるすべてのdivタグを見つけて、ユニークな「halign」クラスを作成します。
最初のdiv
2番目のdiv 3番目のdiv

「halign」がすでにHTMLの他の場所でクラス名として使用されている場合は、別の名前を使用して、それが一意であることを確認してください。
整列させる必要があるすべての「div」要素に「id」名を付けます。配置順序を識別するために、名前に数字を含めます。たとえば、 "box1"、 "box2"などの名前を使用します。
最初のdiv
2番目のdiv 3番目のdiv

すでに使用されている名前 "id"に注意してください。
CSSファイルを開き、次のように入力します。

.halign {位置：絶対値;上：XXX; }

"XXX"を絶対的な上端と水平方向の配置線の間の余白値に置き換えます。 "halign"クラスの上に配置されている他のdiv要素に応じて、ピクセル値またはパーセンテージを使用します。
CSSで個々の "div"スタイルブロックを編集します。コード内で "id"という名前を見つけて、各ブロック内に "left：YYY"コード行を追加し、 "YYY"を要素の左マージンの絶対値に置き換えます。「絶対マージン」は、ブラウザ画面の端と対応するdivの間のスペースです。マージンは、divを並べて配置するためにより大きな値になります。

box1 {左余白：100ピクセル; }

box2 {マージン左：400px; }

box3 {マージン左：700px; }

DIV要素を浮かせる

テキストエディタでCSSファイルを開きます。
「halign」などの一意の「クラス」名を定義し、「float：left;」と入力します。コードブロックに保存してファイルを保存します。
新しいテキストエディタウィンドウでHTMLを開き、配置する必要があるすべての要素が隣接していることを確認します。
整列する必要がある隣接する「div」要素にクラス名「halign」を接続します。
次のコードをHTMLの "div"要素グループの上に配置します。

どうやって

問題のdivのいずれかでクラス名が使用されている場合は、追加のクラス名を入力し、それらをスペース文字で区切ります。 Webページに流動的な幅がある場合は、マージン値とスペースにパーセントを使用して、ブロックと境界のサイズが画面のサイズと解像度に従って自動的に変わるようにします。固定幅Webページのデザイン要素は画面サイズや解像度に適応できず、ピクセル値は余白に適しています。